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Foreword 


In architecture, parti refers to the underlying concept of a building.” Will it be an aca- 
demic structure aimed at increasing cross-disciplinary collaboration or a theater flexible 
enough to support quick set changes? To bring a specific parti to life, architects must not 
only define its essence but also know how to manage the huge number of considerations 
that ultimately impact its construction. 


Design principles are the guiding light for any architect’s parti. They define and commu- 
nicate the key characteristics of a building to a wide variety of stakeholders, including cli- 
ents, builders, city planners, and engineers. Design principles articulate the fundamental 
goals that all decisions can be measured against and thereby keep the pieces of a project 
moving toward an integrated whole. But design principles are not enough. 


Every aspect of a building from an attic to a Zen garden has a set of opportunities and 
limitations that can either add to or detract from the main concept or parti. These include 
standard dimensions, spacing requirements, aesthetics, physical limitations, and more. 
Architects who want to bring coherent visions to life need to learn the detailed ins and 
outs of these design considerations so they can select the best solutions from the options 
available. 


This combination of design principles at the top and design considerations at the bottom 
is what allows architects to fill in the middle with meaningful buildings that enable people 
and organizations to interact, communicate, and get things done. 


Those of us whose parti is bringing rich web applications to life can also benefit from a 
framework of design principles and considerations to guide us. In these pages, Bill Scott 
and Theresa Neil give us just that. Through 30 years of designing and developing soft- 
ware, Bill and Theresa have been the consummate taxonomists—naming, documenting, 
and sharing in loving detail what makes rich interactions succeed and fail. 


* The term parti comes from Matthew Frederick’s book 101 Things I Learned in Architecture School (MIT Press). 
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The breadth of solutions they have encountered has given them a unique perspective 
on the design principles behind the most successful rich interactions on the Web. From 
“make it direct” to “react immediately,’ the principles he outlines in this book are your 
yardstick for measuring the value that rich interactions bring to your web application. 
Through in-depth descriptions of context and trade-offs, Bill and Theresa support each 
principle with the design considerations and best practices you need to make informed 
decisions. Engineers, product managers, marketers, and designers can rally around and 
continually return to these principles and considerations to ensure that everyone is evalu- 
ating the impact of design decisions the same way. 


This combination of rich web interaction design principles at the top and design consider- 
ations at the bottom allows web designers to fill in the middle with meaningful structures 
that enable people and organizations to interact, communicate, and get things done. Just 
like our friends, the architects. 


So, dive in and immerse yourself in the direction and details you need to bring your rich 
web application partis to life! 


—Luke Wroblewski 
October 2008 


Senior Director, Product Ideation and Design, Yahoo! Inc. 
Author, Web Form Design: Filling in the Blanks (Rosenfeld Media) 
Author, Site-Seeing: A Visual Approach to Web Usability (Wiley) 
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Preface 


What Happened 


My (Bills) first personal computer was a Radio Shack Color Computer (circa 
1981)—complete with a chiclet-style keyboard. The first few months the main user inter- 
face was the command line, typing in COLOR BASIC code. 


Later, an upgrade to an Apple Ie brought a nicer keyboard with lots of games. But the 
interface was basically the same. The command-line and text-driven menu systems ruled 
the day. When the IBM PC came on the scene it brought more of the same. Lotus 123, 
which was the state-of-the-art spreadsheet application at the time, was controlled by a set 
of cryptic keystrokes. Not much of a user experience. 


Then an interface revolution started. The Macintosh arrived in 1984, and shortly after 
its introduction, I brought one home. The mouse opened the door to a brand-new world 
of interaction. Instead of having to learn archaic commands to navigate through text- 
based menus, interaction in this new environment happened naturally in a direct, intui- 
tive manner. 


OK, you are probably thinking, so what? That was 1984. This is now. What does this have 
to do with a book about designing web interfaces? 


Everything. 


For most of the history of the Web, sites and applications were marked by primitive inter- 
faces—just like the early desktop era. Most sites were built from two events: 


e Clicking hyperlinks 
e Submitting forms 


Try to create an interesting user experience from just those two events. And, to add insult 
to injury, every click and every submit was punctuated with a page refresh. Creating a 
seamless user experience was next to impossible. 
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Interestingly, the technologies have existed for many years to get around these limitations. 
But it was only after they became widely available across the most common browsers 
that developers could count on them in their everyday development. In 2004, Google 
launched Gmail and Google Maps using a set of techniques later dubbed Ajax by Jesse 
James Garrett. 


The difference was dramatic. The Ajax-enabled Google Maps now interacted more like a 
desktop application with real-time pan-and-zoom—all with no page refresh. Mapquest, 
on the other hand, behaved like most other web applications at the time, refreshing the 
page each time the map was repositioned or zoomed. The contrast was clear between the 
old world of the Web and the new world as enabled by Ajax. 


Why We Wrote This Book 


While I got the chance to live through the first interface revolution for the desktop (even 
writing one of the first games for the Macintosh’), my coauthor Theresa Neil lived through 
the second revolution on the Web. 


A few years ago our paths crossed at Sabre (parent company of Travelocity). Together we 
founded a user experience design team and worked to improve dozens of products, per- 
forming heuristic evaluations and participating in full web application redesigns. From 
that work, we distilled a number of user interface design patterns as well as anti-patterns 
(common mistakes to avoid). 


From there I went to Yahoo! and got to play an active role in defining the Ajax interface 
revolution on the Web. One of my contributions at Yahoo! was to publicly launch the 
Yahoo! Design Pattern Library. As Yahoo!’s Ajax Evangelist, I met and brainstormed with 
many of Yahoo!’s best minds on what it means to take these new interactions and apply 
them to the unique context of the Web. As a result, over the last few years, I have given 
countless talks on this subject, sharing best practices with web developers and designers 
from around the world. 


At the same time Theresa struck out as an interface designer in her own consultancy. In 
her work she has continued to refine the initial set of design patterns and principles while 
leading the design for 30+ live rich internet applications—enterprise applications as well 
as public-facing websites. These patterns have given Theresa and her clients a common 
vocabulary and a set of standards to work with for new application design and existing 
system redesign. 


This book is an outgrowth of our experience—a distillation of the combined 30+ years 
that Theresa and I share. After repeated requests, we decided the best way to share this 
with a larger audience was to put the material into book form. 


* GATO was published by Spectrum Holobyte in 1985. 


Download at WoweBook.Com 


Preface xiii 


What This Book Is About 


This book is not about information architecture, although you will find information archi- 
tecture principles alluded to throughout it. And this book is also not about visual design, 
although you will find that the backdrop of good visual design is assumed throughout. 


This book is about interaction design: specifically, interaction design on the Web. And 
even more specifically, about rich interaction design on the Web. It is a distillation of best 
practices, patterns, and principles for creating a rich experience unique to the Web. 


By unique I mean that the Web comes with its own context. It is not the desktop. And while 
over time the lines between desktop and Web blur more and more, there is still a unique 
aspect to creating rich interactions on the Web. Editing content directly on the page (e.g., 
In-Page Editing, as we discuss in Chapter 1) borrows heavily from the desktop—but has 
its own unique flavor when applied to a web page. This book explores these unique rich 
interactions as set of design patterns in the context of a few key design principles. 


Design Patterns 
What do we mean by design patterns? 


Christopher Alexander coined the term “patterns” in his seminal work A Pattern Lan- 
guage: Towns, Buildings, Construction (Oxford University Press) to catalog common ar- 
chitectural solutions to human activities. He described a pattern as: 


...a problem which occurs over and over again in our environment, and then de- 
scribes the core of the solution to that problem... 


Patterns were later applied to software in the book Design Patterns: Elements of Reusable 
Object-Oriented Software (Addison-Wesley), by the Gang of Four (Erich Gamma, Rich- 
ard Helm, Ralph Johnson, and John M. Vlissides). A few years later design patterns were 
extended to the realm of user interface design.” 


It is the latter form of patterns that we present in this book: interaction design patterns. 
You will find 75+ patterns illustrating the most common techniques used for rich web 
interaction. Each design pattern is illustrated by examples from various websites. Since 
the patterns described are interactive, we use a generous amount of figures to explain the 
concept. We tease out the nuances for a given solution as well as identify patterns to be 
avoided (anti-patterns). Best practice sections call out suggestions along the way. 


The patterns are presented in the context of six design principles, which form the frame- 
work for the book: 


* See works such as Jenifer Tidwell’s Designing Interfaces: Patterns for Effective Interaction Design (O'Reilly) and 
the pattern library of Martijn van Welie (http://www. welie.com/). 
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Principle One: Make It Direct 
As Alan Cooper states: “Where there is output, let there be input.” This is the princi- 
ple of direct manipulation. For example, instead of editing content on a separate page, 
do it directly in context. Chapters 1-3 in this principle include patterns for “In-Page 
Editing” “Drag and Drop,’ and “Direct Selection.” 


Principle Two: Keep It Lightweight 
While working on a redesign of Yahoo! 360 the designer, Ericson deJesus, used the 
phrase “light footprint” to describe the need to reduce the effort required to interact 
with the site. A primary way to create a light footprint is through the use of Con- 
textual Tools. This principle explores the various patterns for these in Chapter 4, 
“Contextual Tools.” 


Principle Three: Stay on the Page 

The page refresh is disruptive to the user’s mental flow. Instead of assuming a page 
refresh for every action, we can get back to modeling the user's process. We can de- 
cide intelligently when to keep the user on the page. Ways to overlay information or 
provide the information in the page flow are discussed in Chapters 5 and 6, “Over- 
lays” and “Inlays’, respectively. Revealing dynamic content is discussed in Chapter 
7, “Virtual Pages.” In the last chapter of this section, Chapter 8, we discuss “Process 
Flows,’ where instead of moving from page to page, we can create in-page flows. 


Principle Four: Provide an Invitation 
Discoverability is one of the primary challenges for rich interaction on the Web. A 
feature is useless if users don’t discover it. A key way to improve discoverability is to 
provide invitations. Invitations cue the user to the next level of interaction. This sec- 
tion, including Chapters 9 and 10, looks at “Static Invitations,” those offered statically 
on the page, and “Dynamic Invitations,” those that come into play in response to the 
user. 


Principle Five: Use Transitions 
Animations, cinematic effects, and various other types of visual transitions can be 
powerful techniques. We explore engagement and communication in Chapter 11, 
looking at a set of the most common “Transitional Patterns,’ and Chapter 12 is devot- 
ed to the “Purpose of Transitions? A number of anti-patterns are explored as well. 


Principle Six: React Immediately 
A responsive interface is an intelligent interface. This principle explores how to make 
a rich experience by using lively responses. In Chapter 13, a set of “Lookup Patterns” 
is explored, including Live Search, Live Suggest, Refining Search, and Auto Com- 
plete. In Chapter 14, we look at a set of “Feedback Patterns,” including Live Previews, 
Progressive Disclosure, Progress Indication, and Periodic Refresh. 
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Who Should Read This Book 


Designing Web Interfaces is for anyone who specifies, designs, or builds web interfaces. 


Web designers will find the principles especially helpful as they form a mental framework, 
defining a philosophy of designing nuanced rich interactions. They will also find the pat- 
terns a welcome addition to their design toolbox, as well as find the hundreds of provided 
examples a useful reference. And of course the best practices should provide a nice check- 
list reminder for various interaction idioms. 


Product managers will find the patterns and examples to be excellent idea starters as they 
think through a new business problem. Though this book does not provide programming 
solutions, web developers will nevertheless appreciate the patterns, as they can be mapped 
directly into specific code solutions. For everyone involved, the patterns form a vocabu- 
lary that can span product management, design, and engineering, which in the end forms 
the basis for clearer cross-team communication. 


You'll also find that whether you are just starting out or you are a grizzled veteran, the 
wealth of real-world examples in the context of design principles and patterns will be a 
benefit to your daily work. 


What Comes with This Book 


This book has a companion website (http://designingwebinterfaces.com) that serves as an 
addendum containing updated examples; additional thoughts on the principles, patterns, 
and best practices; and helpful links to articles and resources on designing web interfaces. 


All of the books diagrams and figures are available under a Creative Commons license 
for you to download and use in your own presentations. You'll find them at Flickr (http:// 
www. flickr.com/photos/designingwebinterfaces/). 


Conventions Used in This Book 


This book uses the following typographic conventions: 


Italic 
Used for example URLs, names of directories and files, options, and occasionally for 
emphasis. 


Bold text 
Indicates pattern names. 


— Tip 


This indicates a tip, suggestion, or general note. 
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Using Examples 


You can find all of the figure examples on our companion Flickr site (http://flickr.com/ 
photos/designingwebinterfaces). The figures are available for use in presentations or other 
derivative works provided you respect the Creative Commons license and provide attri- 
bution to this work. An attribution usually includes the title, author, publisher, and ISBN. 
For example: “Designing Web Interfaces, by Bill Scott and Theresa Neil, Copyright 2009 
Bill Scott and Theresa Neil, 978-0-596-51625-3” 


If you feel your use of examples falls outside fair use or the permission given above, feel 
free to contact us at permissions@oreilly.com. 


We'd Like to Hear from You 


We have tested and verified the information in this book to the best of our ability, but you 
may find that features have changed or that we may have made a mistake or two (shocking 
and hard to believe). Please let us know about any errors you find, as well as your sugges- 
tions for future editions by writing to: 

O'Reilly Media, Inc. 

1005 Gravenstein Highway North 

Sebastopol, CA 95472 

800-998-9938 (in the United States or Canada) 

707-829-0515 (international or local) 

707-829-0104 (fax) 
We have a web page for this book where we list examples and any plans for future editions. 
You can access this information at: 

http://www .oreilly.com/catalog/97805965 16253 
You can also send messages electronically. To be put on the mailing list or request a cata- 
log, send an email to: 

info@oreilly.com 
To comment on the book, send an email to: 

bookquestions@oreilly.com 
For more information about our books, conferences, Resource Centers, and the O'Reilly 
Network, see our website at: 


http://www oreilly.com 
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Safari Books Online 


ss When you see a Safari” Books Online icon on the cover of your favorite 
Safa ri. technology book, that means the book is available online through the 
Books Online 
O'Reilly Network Safari Bookshelf. 


Safari offers a solution that’s better than e-books. It’s a virtual library that lets you easily 
search thousands of top tech books, cut and paste code samples, download chapters, and 
find quick answers when you need the most accurate, current information. Try it for free 
at http://safari.oreilly.com. 
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Principle One 


Make It Direct =| 


On a recent trip to Big Sur, California, I took some photos along scenic Highway 1. After 
uploading my pictures to the online photo service, Flickr, I decided to give one of the 
photos a descriptive name. Instead of “IMG_6420.jpg’, I thought a more apt name would 
be “Coastline with Bixby Bridge” 


The traditional way to do this on the Web requires going to the photo's page and clicking 
an edit button. Then a separate page for the photo’s title, description, and other informa- 
tion is displayed. Once on the editing page, the photo’ title can be changed. Clicking 
“Save” saves the changes and returns to the original photo page with the new title displayed. 
Figure P1-1 illustrates this flow. 


Display Edit 
Photo Photo 


Figure P1-1. Web applications have typically led the user to a new page to perform editing 


In Flickr you can edit the photo title just like this. However, Flickr’s main way to edit photos 
is much more direct. In Figure P1-2 you can see that by just clicking on “IMG_6420.jpg’, 
editing controls now encapsulate the title. You have entered the editing mode directly 
with just a simple click. 


Editing directly in context is a better user experience since it does not require switching 
the user's context. As an added bonus, making it easier to edit the photo’ title, description, 
and tags means more meta-information recorded for each photo—resulting in a better 
searching and browsing experience. 


Figure P1-2. In Flickr, clicking directly on the title allows it to be edited inline 
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Make It Direct 


The very first websites were focused on displaying content and making it easy to navigate 
to more content. There wasnt much in the way of interactivity. Early versions of HTML 
didn’t include input forms for users to submit information. Even after both input and 
output were standard in websites, the early Web was still primarily a read-only experience 
punctuated by the occasional user input. This separation was not by design but due to the 
limits of the technology. 


Alan Cooper, in the book About Face 3: The Essentials of Interaction Design, describes the 
false dichotomy. 


...many programs have one place [for] output and another place [for] input, [treat- 
ing them] as separate processes. The users mental model...doesn’t recognize a 
difference. 


Cooper then summarizes this as a simple rule: Allow input wherever you have output.” 
More generally we should make the interface respond directly to the user’s interaction: 
Make it direct." 


To illustrate this principle, we look at some broad patterns of interaction that can be used 
to make your interface more direct. The next three chapters discuss these patterns: 
Chapter 1, In-Page Editing 
Directly editing of content. 


Chapter 2, Drag and Drop 
Moving objects around directly with the mouse. 


Chapter 3, Direct Selection 
Applying actions to directly selected objects. 


* Cooper, Alan et al. About Face 3: The Essentials of Interaction Design (Wiley, 2007), 231. 


+ This is a restatement of the principle of Direct Manipulation coined by Ben Scheiderman (“Direct manipulation: 
a step beyond programming languages,’ IEEE Computer 16[8] [August 1983], 57-69). 
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Chapter 1 


In-Page Editing 


Content on web pages has traditionally been display-only. If something needs editing, a 
separate form is presented with a series of input fields and a button to submit the change. 
Letting the user directly edit content on the page follows the principle of Make It Direct. 


This chapter describes a family of design patterns’ for directly editing content in a web 
page. There are six patterns that define the most common in-page editing techniques: 


Single-Field Inline Edit 
Editing a single line of text. 


Multi-Field Inline Edit 
Editing more complex information. 


Overlay Edit 
Editing in an overlay panel. 


Table Edit 

Editing items in a grid. 
Group Edit 

Changing a group of items directly. 
Module Configuration 

Configuring settings on a page directly. 


The most direct form of In-Page Editing is to edit within the context of the page. First, it 
means we don't leave the page. Second, we do the editing directly in the page. 


* We use the term “design patterns” to denote common solutions to common problems. Design patterns origi- 
nate from Christopher Alexander's book A Pattern Language (Oxford University Press). You can read a series 
of essays from me (Bill) and others on design patterns at http://www.lukew.com/ff/entry.asp?347. 
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The advantage of Inline Edit is the power of context. It is often necessary for users to 
continue to see the rest of the information on the page while editing. For example, it is 
helpful to see the photo while editing the photo’s title, as explained in the next section, 
“Single-Field Inline Edit.” 


It is also useful when editing an element that is part of a larger set. Disqus, a global com- 
ment service, provides inline editing for comments (Figure 1-1). After posting a comment 
and before anyone replies to the comment, an edit link is provided. The editing occurs 
within the context of the rest of the comments shown on the page. 


Tip 
If editing needs the context of the page, perform the editing inline. 


i Daniel Ha = 1 point 


I'm sò smart! I'm so smart! S-M-R-T! 


reply edit 


Figure 1-1. Disqus allows comments to editing inline within the context of other comments 


The first two patterns, Single-Field Inline Edit and Multi-Field Inline Edit, describe 
techniques for bringing direct inline editing into the page. 


Single-Field Inline Edit 


The simplest type of In-Page Editing is when editing a single field of text inline. The edit- 
ing happens in place instead of in a separate window or on a separate page. Flickr provides 
us a canonical example of Single-Field Inline Edit (Figure 1-2). 


Front Grounds Non-editing state 


F! É ’ aie ren Flickr chose to keep the title clear of any edit 
actions. 


The title looks like a title. This provides the highest 
readability by not cluttering the interface with edit 
actions or an editable style. 


This will lead to discoverability issues. An alternate 
approach is to place an “edit link somewhere in line 
with the title that would start the editing process. 
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Invitation to edit 
Front Grounds 
‘J i s = Glicktoedity a pan | On mouse hover, the background is backlit with 
ea ad iiia PONESE S Ae yellow. A tool tip invites the user to “Click to edit”. 


Invitations attempt to lead the user to the next 
level of interaction (from mouse hover to mouse 
click). 


Invitations have to be discovered to be useful. 
Flickr's bet is that the user will drift his mouse over 
the title (of his own photo). 


Editing 
Front Grounds 
i Once the user clicks on the title, it is placed into an 
| SAVE | OR Cancel | fi 

edit mode. An edit box is switched into view im- 
ot Gear Cm we Awe aa) mediately under the title text. 


The “Save” and “Cancel” buttons make it clear we are 
editing the title by providing a familiar interface— 
the user input form. 


A disadvantage to this approach is that the picture 
gets pushed down to make way for the additional 
interface elements. 


Completion 
saving... 

There are a number of ways to signify that the 
US OSS on © Ne Ae a text is being saved. In this example, the title text 
is temporarily replaced with the text “saving...” 
Upon completion, the new title is shown in the 
non-editing style. 


An alternative approach is to show a busy progress 
indicator while the change is being made. 


Figure 1-2. Flickr provides a straightforward way to edit a photo’ title directly inline 


Considerations 


The flow is simple. Click on the title to start editing. When you are done, hit the “Save” 
button, and the title is saved in place. Flickr was one of the first sites to employ this type 
of in-page editing. As a testament to its usefulness, the interaction style first designed has 
not changed much over the last few years. 


But there are some challenges to consider. 
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Discoverability 


Just how discoverable is this feature? In this example, there are a number of cues that in- 
vite the user to edit. The invitations include: 


e Showing a tool tip (“Click to edit”) 
+ Highlighting the background of the editable area in yellow 
e Changing the cursor to an edit cursor (I-beam) 


But all these cues display after the user pauses the mouse over the title (mouse hover). 
Discoverability depends on the user hovering over the title and then noticing these 
invitations.” 


To make the feature more discoverable, invitational cues could be included directly in the 
page. For example, an “edit” link could be shown along with the title. Clicking the link 
would trigger editing. By showing the link at all times, the edit feature would be made 
more discoverable. 


But this has to be balanced with how much visual noise the page can accommodate. Each 
additional link or button makes the page harder to process and can lead to a feature not 
being utilized due to the sheer volume of features and their hints shown on the page. 


Tip 


If readability is more important than editability, keep the editing action hidden until 
the user interacts with the content. 


Yahoo! Photos‘ took this approach for editing titles (Figure 1-3). When showing a group 
of photos, it would be visually noisy to display edit links beside each title. Instead, the 
titles are shown without any editing adornment. As the mouse hovers over a photo title, 
the text background highlights. Clicking on the title reveals an edit box. Clicking outside 
of the edit field or tabbing to another title automatically saves the change. This approach 
reduces the visual noise both during invitation and during editing. The result is a visually 
uncluttered gallery of photos. 


* While the Yahoo! Design Pattern Library (http://developer.yahoo.com/ypatterns/) was being launched, this 
pattern was not included in the initial set of patterns due to an internal debate over this issue of discoverability. 
In fact, one of the reviewers, a senior designer and frequent user of Flickr, had only recently discovered the 
feature. As a result, we withheld the pattern from the public launch. 


t Yahoo! Photos was replaced in 2007 with Flickr. 
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Figure 1-3. Editing titles in Yahoo! Photos keeps visual clutter to a minimum; it simply turns on a 
visible edit area during editing 


Accessibility 


Another concern that arises from inline editing is the lack of accessibility. Accessibility 
affects a wider range of users than you might first consider. Assistive technologies help 
those with physical impairments, medical conditions, problems with sight, and many 
other conditions. 


Assistive technologies generally parse the page’s markup to find content, anchors, alter- 
nate titles for images, and other page structure. If the inline edit feature does not contain 
explicit markup built into the page (such as an explicit, visible edit link), assistive tech- 
nologies cannot easily discover the inline edit feature. 


In a sense, relying on the mouse to discover features will prevent some users from being 
able to edit inline. As mentioned before, providing an explicit edit link helps with discov- 
erability (as shown previously in Figure 1-1). But as a by-product it also makes the feature 
more accessible. 


Tip 
Providing an alternative to inline editing by allowing editing on a separate page can 
improve accessibility. 


There is a natural tension between direct interaction and a more indirect, easily accessible 
flow. It is possible to relieve this tension by providing both approaches in the same inter- 
face. Flickr actually does this by offering an alternate, separate page for editing (Figure 
1-4). 


Additonal Information Edit link 


Flickr provides a separate “Edit” link for editing the 
va Canon Poweråhet 8048 title, description, and tags for the photo. 


eh 
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Separate page for editing 


comme. The “Edit your photo” page provides a standard, 
form-based interface for editing. Assistive technolo- 
gies work easily with static pages like this. 


Figure 1-4. Flickr allows you to also edit a photo’ title, description, and tags in a separate page 


Multi-Field Inline Edit 


In our previous example, a single value was being edited inline. What happens if there are 
multiple values, or the item being edited is more complex than a string of text and you still 
would like to edit the values inline? 


The pattern Multi-Field Inline Edit describes this approach: editing multiple values inline. 


37 Signal’s Backpackit application uses this pattern for editing a note (Figure 1-5). A note 
consists of a title and its body. For readability, the title is displayed as a header and the 
body as normal text. During editing, the two values are shown in a form as input text 
fields with labeled prompts. 


“5 


Good Example for Inline Editin |nvitationttojedit 


When you add a note there are two f On mouse hover two actions are revealed: edit and 


delete. The”Edit” link serves as the invitation to edit 
the note. 
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Ch Good Example for Inline Editing 


HA aAa err tre ben F 


Tite |Good Example for Inline Editing 


Body |When you add a note there are two 


I~ Show the date of this note after the title 


Save note | of Cancel 


Good Example for Inline Editing 
When you add a note there are two fiel 
This would also work well for more con 
such as pick a date range or and advar 


Transition to edit 


Once you click the “Edit” link, a busy indicator is 
animated while an edit form for the title and body 
replaces the textual display of the note. 


A slight cross-fade transition and a progress indica- 
tor are used to cue the user to this switch of con- 
text. This ties the textual display and the edit form 
together. 


Editing 


Editing is very straightforward since it uses a form. 
It provides the flexibility for other options to be 
placed in the editing form. 


The “Save note” button completes the edit. 


Completion 


The edit form is replaced with the new title and 
body. To make it clear that a change occurred, the 
background is highlighted in yellow. After a few 
seconds the yellow is faded back down to the nor- 
mal background color. 


Contrast this with Flickr's technique of showing sta- 
tus while saving instead of after completion. 


Figure 1-5. Backpackit reveals a multi-field form for editing a note’ title and body 


Considerations 


In Single-Field Inline Edit the difference between display mode and edit mode can be 
more easily minimized, making the transition less disruptive. But when editing multiple 
fields, there is a bigger difference between what is shown in display mode and what is 


needed to support editing. 
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Readability versus editability 


Readability is a primary concern during display. But the best way to present editing is with 
the common input form. The user will need some or all of the following: 


e Edit controls 

e Field prompts 

e Help text for user input 

+ Error handling 

e Assistive input (e.g., calendar pop up or drop-down selection field) 
+ Editing styles (e.g., edit fields with 3D sunken style) 


The edit mode will need to be different in size and layout, as well as in the number and 
type of components used. This means that moving between modes has the potential to be 
a disruptive experience. 


In our example, the form for editing the note takes up a larger space on the page than 
when just displaying the note. 


Blending display and edit modes 


Ideally you would like the two modes to blend together in a seamless manner. Bringing 
the edit form into the page flow will have an effect on the rest of the page content. One 
way to smooth out the transition is by a subtle use of animation. Backpackit does this by 
fading out the display view and fading in the edit view at the same time (see the cross-fade 
in Figure 1-5). 


Another approach is to use the same amount of space for both display and edit modes. 
In Yahoo! 360, you can set a status message for yourself. Your current status shows up on 
your 360 home page as a “blast,” represented as a comic book-style word bubble. Visually 
it looks like a single value, but there are actually three fields to edit: the blast style, the sta- 
tus, and any web page link you want to provide when the user clicks on your blast. Figure 
1-6 shows the blast as it appears before editing. 


4 f A kiss is a lovely trick designed by nature to stop speech when words become superfluous. 


Wi > W 
Figure 1-6. Yahoo! 360 shows an “Edit Blast” link to invite editing 


Figure 1-7 shows how the blast appears during editing. Notice that the edit form is de- 
signed to show both modes (display and editing) in the same visual space. 


Download at WoweBook.Com 


Overlay Edit 11 


J == is a lovely trick designed by nature to stop speech råen vords 93 charact n 
f superfluous an be seen by 


| w ie RER a é 


Figure 1-7. Yahoo! 360 brings the editing into the displayed blast; the difference between display and 
edit modes is minimized 


The size similarity was not an accident. During design there was a concerted effort to 
make the display mode slightly larger without losing visual integrity, while accommodat- 
ing the editing tools in the space of the bubble. 


WYSIWYG" 


If the two modes (display and editing) are in completely separate spaces, the user may lose 
a sense of what effect the change will have during display. In Yahoo! 360, you can change 
the type of bubble and immediately see what it will look like. Switching from a “quote” 
bubble to a “thought” bubble is reflected while still in editing mode (Figure 1-8). This 
would not be possible if editing happened in a separate edit form. 


-~f kiss is « lovely trick designed by mature to stop speech shen cords 91 characters em 


uae] [Thovst 1 +) == RT 


Figure 1-8. Yahoo! 360 immediately displays the new blast type while still in edit mode 


Overlay Edit 


The previous two patterns brought editing inline to the flow of the page. Inline editing 
keeps the editing in context with the rest of the elements on the page. 


Overlay Edit patterns bring the editing form just a layer above the page. While still not 
leaving the page for editing, it does not attempt to do the editing directly in the flow of the 
page. Instead a lightweight pop-up layer (e.g., dialog) is used for the editing pane. 


There are several reasons for choosing Overlay Edit instead of Inline Edit. 


Sometimes you can't fit a complex edit into the flow of the page. If the editing area is just 
too large, bringing editing inline can shuffle content around on the page, detracting from 
the overall experience. A noisy transition from display to edit mode is not desirable. 


* What You See Is What You Get: an interface where content displayed during editing appears very similar to the 
final output. 
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At other times you might choose to interrupt the flow, especially if the information be- 
ing edited is important in its own right. Overlays give the user a definite editing space. A 
lightweight overlay does this job nicely.” 


Tip 
An Overlay Edit is a good choice if the editing pane needs dedicated screen space 
and the context of the page is not important to the editing task. 


Yahoo! Trip Planner is an online place for creating and sharing trip plans. Trips contain 
itinerary items that can be scheduled. When scheduled, the itinerary contains the dates 
the item is scheduled. Each item can be edited in an overlay (Figure 1-9). 


Non-editing state 


Each itinerary item in Yahoo! Trip Planner can be 
scheduled. 


You can add dates or edit an existing one. The 
dates scheduled are displayed in a simple read- 
able format. 

Dates: | Acc! 

Ser Jun 4 12:00am - Mon Jur $ 12:00am 


K-i 


Invitation to edit 


The “[Edit]” link is the invitation to edit. 


It is shown at all times. 


Assign Date: ( whats (hie?) 


Surts: [Sem 06/04/06 (Day 1) =) [Midnight =] [00 =) 


Enos [Won 06/05/06 (Day 2) =| [Midnight =] (700 =] 
Update | Remove | Cancel 


* In the past, separate browser windows were used for secondary windows. Lightweight overlays simply map the 
secondary content into a floating layer on the page. The resulting overlay feels more lightweight. See Chapter 5. 
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Editing 
The edit form is shown in an overlay. 


Since scheduling an itinerary item requires several 
fields of input, the overlay provides a nice place to 
Assign Oste: ( whata shia?) > contain this editing. 


sue [Sun 06/04/06 Way 1) >) [Midnight =] {00 ~) 


tear | Mon 06/05/06 Day 2) vj [Midnight "j | :15 + 
mm Remove | Cancel | 


Completion 
The itinerary item is scheduled after pressing the 
Update button. 


No transitions are used. The presence of the sched- 
uled date signifies that it has been added. 


Datos: | Acs! 
Sen Jun 4 12:00am - Mon Jun § 12:15am] Eos | 


Figure 1-9. Yahoo! Trip Planner provides a complex editor in an overlay for scheduling an itinerary 
item 


Considerations 


“Sun Jun 4 12:00am—Mon Jun 5 12:00am” is easier to read than a format appropriate for 
editing (Figure 1-10). Using an editor prevents errors when entering the start and end 
dates for a specific itinerary item. 


Assign Date: ( what's this?) © 


Starts: [Sun 06/04/06 (Day 1) ~] [Midnight ~] [:00 ~] 
Ends: [Mon 06/05/06 (Day 2) v] [Midnight | [cis |x] 
Uplate | Remove | Cancel | 


Figure 1-10. Yahoo! Trip Planner provides an overlay editor for adjusting itinerary times 


Since the range of dates is known, Trip Planner uses a series of drop-downs to pick the 
start and end dates along with the time. 


It should be noted that using multiple drop-downs for choosing the hour and minute is not 
the best experience. Although not in the context of an overlay, a better example of choosing 
an event time when creating an event can be found at Upcoming.org (Figure 1-11). 


Download at WoweBook.Com 


14 


Chapter 1: In-Page Editing 


When? 
Aug 29, 2008 8:00pm Z All day 
— End date/time (optional) ai pm 
Aug 29, 2008 12008m 12:00pm 
Type Of Event max me cosestcateg = OO?" 120pe 
oan 2:00pm 
300am 3:00pm 
More details (optional) ar | att 
About the event (e.g. description, 000m 500pm 
600am Song, 
10am 7:00pm 
6:00am 6:00pm 


Figure 1-11. Upcoming provides a better experience for choosing time of day 


The experience of picking a time from a single list (or typing the time in) is more direct 
than navigating multiple drop-downs. 


Why an overlay? 
An overlay should be considered when: 


The editing module is considerably larger than the display values. 


Opening an area on the page for the editing module would be distracting or push 
important information down the page. 


There is concern that the opened information might go partially below the fold. An 
overlay can be positioned to always be visible in the page. 


You want to create a clear editing area for the user. 


What you are editing is not frequently edited. Having to click on an edit link, adjust to 
the pop-up location, perform your edit, and close the dialog is a tedious way to edit a 
series of items. In such cases, opt to either dedicate a space on the page for each item 
as it is selected, or allow the editing to occur in context to remove some of the time 
required to deal with an overlay. 


What you are editing is a single entity. If you have a series of items, you should not 
obscure the other similar items with an overlay. By allowing the edit to occur in con- 
text, you can see what the other item’s values are while editing. 
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Best Practices for Inline Edit and Overlay Edit 


In-Page Editing provides a nice way to change displayed content and observe the change in 
context. Here are some best practices to consider: 

eep the editing inline for single fields. 

Use inline when editing one of many in a set. This keeps the context in view. 


eep the display and editing modes the same size when possible. This will avoid page 
jitter and reduce distraction when moving between the two modes. 


ake the transition between display and editing as smooth as possible. 

Use mouse hover invitations to indicate editing when readability is primary. 

Avoid using double-click to activate editing. 

ace a bracketed “fedit]” link near the item to be edited if editability is equally important 
or if the quantity of items that can be edited is small. This is a nice way to separate the link 
from the displayed text without creating visual distractions. 

Show the edit in place when editing one item in a series (to preserve context). 

Use an overlay when what is being edited needs careful attention. This removes the likeli- 
hood of accidentally changing a critical value. 

Do not use multiple overlays for additional fields. If you have a complex edit for a series of 
elements, use one overlay for all. 
When providing an overlay, use the most lightweight style available to reduce the disrup- 
tiveness of the context switch between render and editing state. 


U 


Use buttons when it might be too subtle to trigger completion implicitly. 
Use explicit buttons for saving and canceling when there is room. 


Whenever possible, allow the overlay to be draggable so that obscured content can be 
evealed as needed. 


Table Edit 


Editing tables of data is less common in consumer web applications. In enterprise web 
applications, however, tables reign supreme. The most common request is for the table 
editing to work like Microsoft Excel, which long ago set the standard for editing data in 
a grid. 


A good example of Table Edit is a Google Docs Spreadsheet (Figure 1-12). 
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Non-editing state 


Each cell is tuned toward readability. There are no 
editing clues while in this state. 


1 Jenny Almay Female 565-64 
z Mark Billings Male 55551 
3 Emest Calloway Male 565-54 
4 Lucinda Higgins Female 555-51 
5 Mary Rakinson Female 555-54 
© Gary Smith Male 555-51 
7 Michael Stratton Male 555-54 


La Fiona Timhadand Female S656551 


ca +. | Invitation to edit 


The invitation to edit comes after the cell is 
5555 clicked. 


* [Jenny Alma I Female 

2 Mark Billings Male 555-5) 
3 Emest Calloway Male 555-5 
4 Lucinda Higgins Female 555-5 
5 Mary Rakinson Female 555-9) 
6 Gary Smith Male 555-5) 
7 Michael Stratton Mate 555-5) 


Ls Fiona Timnertand Faemais 6666 


Editing 


An edit box is overlaid on top of the cell being ed- 
ited. This invites the user to actually type as much 


1 | Jenny Almay Female 555-5) i 

a Male 555-5 text as she needs into the cell. 
3 Emest Calloway Male 955-5] 

4 Lucinda Higgins Female 555-5! 

5 Mary Rakinson Female 555-5] 

6 Gary Smith Male 555-57 

* Michael Stratton Male 555-5 


La Filana Timhadond amala GERA 


a ¥ _ » » u «œ F =) Completion 
Completion occurs when the user tabs, clicks out- 

W Jennifer Almay [Female 15556585 side the cell, or presses Enter. 

2 Mark Billings Male "555-581 

3 Emest Calloway Male 555-58 

4 Lucinda Higgins Female 555-55) 

$ Mary Rakinson Female 555-55 

& Gary Smith Male 556-55; 

7 Michael Stratton Male 555-55; 

s Fiona Timberland Female 


Figure 1-12. Editing a spreadsheet in Google Docs is very similar to editing a spreadsheet in Microsoft 
Excel 
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Considerations 


Presentation is the primary consideration when displaying a table of data. Editing is sec- 
ondary. As a result, the editing scaffolding is hidden and only revealed when it’s clear the 
user wants to edit a cell. 


Activation 

A single mouse click is required to start editing a cell instead of a mouse hover. This 
is consistent with keeping the display of the grid uncluttered. Imagine how irritating it 
would be if every mouse motion revealed an edit box. 


Tip 
You should generally avoid double-click in web applications. However, when web ap- 
plications look and behave like desktop applications, double-click can be appropriate. 


Rendering versus editing. Google Spreadsheet displays the edit box slightly larger than the cell. 
This clearly indicates editability and lets the user know that input is not limited to the size 
of the cell (the edit box actually dynamically resizes as the user types into it). The only is- 
sue to consider is that the larger edit area covers other table cells. However, this works well 
in this case since editing is explicitly triggered by a mouse click. If activation had occurred 
on a mouse hover, the edit mode would have interfered with cell-to-cell navigation. 


Best Practices for Table Edit 


Here are some best practices for Table Edit: 
Bias the display toward readability of the table data. 
Avoid mouse hover for activating cell editing. It makes for the feeling of “mouse traps”and 
makes the interaction noisy. 
Activate edit with a single click. While using a double-click may not be totally unexpected 
(since it looks like an Excel spreadsheet), a single click is easier to perform. 
Consider allowing extra space during editing either through a drop-down editor or by 
slightly enlarging the edit cell. 
As much as possible, mimic the normal conventions of cell navigation that users will al- 
ready be familiar with (e.g., in Microsoft Excel). 
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Group Edit 


As mentioned before, it is a good idea to keep the differences between the edit mode and 
the display mode as minimal as possible. In fact, it is a good idea to minimize modes 
where possible. In honor of this principle, a former manager of mine sported a vanity 
plate with the phrase “NOMODES” However, modes cannot be avoided altogether, as 
they do provide necessary context for completing specific tasks. 


If you want to keep the display of items on the page as uncluttered as possible while still 
supporting editing, consider using a single mechanism to enter a special editing mode: 
Group Edit. 


On the iPhone’s home screen, the icons are normally locked down. However, there is a 
way to switch into a special Group Edit mode that allows you to rearrange the icon’s posi- 
tions by drag and drop. You enter the mode by pressing down continuously on an icon 
until the editing mode is turned on (Figure 1-13). 


Non-editing state 
Tapping icons on the iPhone launches an 
application. 


What we would like is to switch into a mode where 
we can move the icons around. 


Holding down on an icon activates the rearrange 
mode. 


Invitation to rearrange 


When the mode is activated, all of the icons begin 
to wiggle. 


This gives the clue that the icons are “loose” and 
may be rearranged. 
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Rearranging 


Tapping an icon no longer launches an applica- 
tion. Instead, you can drag and drop icons into 
new positions. 


Completion 


Pressing the “Home” button returns you to the 
normal Home screen functionality (exiting the re- 
arranging mode). 


Figure 1-13. The iPhone has a special mode for rearranging applications on the home page—pressing 
and holding down on an icon places all the applications in “wiggly mode” 


Considerations 


The Apple technique signifies that we have entered a special editing mode. When the 
icons become “wiggly; it is not a large intuitive leap that the icons have become loose and 
thus we can rearrange them. 


Discoverability 


Admittedly, the feature is not very discoverable. But it can be argued that it is straight- 
forward once discovered. However, pressing the home button deactivates the rearranging 
mode. This really should operate more like a toggle. A better way to exit the “wiggly” 
mode would be to press and hold down on a wiggly icon. It follows the idea that you are 
pushing the icon back into its fixed place. Since deactivation is not the same mechanism 
as activation, it is a little hard to figure out how to go back into the normal display mode. 
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Tip 
Activation and deactivation should normally follow the same interaction style. This 


makes it easy to discover the inverse action. This is a principle we call Symmetry of 
Interaction. 


Another example of group editing is in the 37 Signals product, Basecamp (Figure 1-14). 
When sharing files with Basecamp, you can organize them into various categories. The 
categories are like folders. Clicking on a category link shows all the files in that “folder.” 
What if you want to delete a category? Or rename it? At the top of the category section 
there is a single “Edit” link that turns on editing for the whole area. 


Categories Edit Categories Done editing 

021.00 Make & Direct 01.00. Make ir Direct Reneme 

01.01 inPacetgs 01.01 inPageEdit Rename 

Leafs Drafts Reneme & 

RA su ORA Stuff Rename 
Add another caingerv 


Figure 1-14. 37 Signals Basecamp provides a way to toggle a set of items into edit mode 


Once the Group Edit mode is entered, you can add another category, rename an existing 
category, or delete empty categories. Notice the “Edit” link toggled to read “Done Editing”. 
Clicking this link exits the group-editing mode. 


Tip 
Switching between edit modes should happen instantaneously. There is no point in 
making the user wait on an animation to finish before he can start editing. 


Discoverability versus readability 


The advantage of providing a toggling edit mode is that it keeps the display uncluttered 
with the editing scaffolding. The disadvantage is that it is less discoverable. This tension 
between discoverability versus readability is common and must be balanced by the needs 
of the user. 


Symmetry of Interaction 
Unlike the iPhone example, you turn off editing in the same manner and location that 
you switched it on. The “Done Editing” link is in the same spot as the “Edit” link was. 


Since both are hyperlinks, they have the same interaction style. Interactions should be 
symmetrical wherever possible. 
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Module Configuration 


Popular portal sites like Yahoo! and Google’s interactive home page display specific con- 
tent modules (e.g., Top Stories). 


Module Configuration is a common pattern on these types of sites. Instead of modifying 
modules on a separate page, the sites provide ways to directly configure the amount and 
type of content that shows in each module. The My Yahoo! home page provides an “Edit” 
link that allows for Module Configuration (Figure 1-15). 


v Yahoo! New ex (5) TE Non-configuration state 


A news module contains top news stories. Each mod- 
ule also has an “Edit” link. 


Invitation to configure 


v 5 2 
R The “Edit” link is the invitation to edit. 
Activating edit slides in a mini-configuration panel in 
context with the news stories. 
= » 2 Configuration 
ls |) 5 The mini-form allows you to change the title and the 


number of stories that show. You can save the chang- 
es with the “Save” button. The “Close Edit” link forms 
a symmetrical interaction for edit activation and de- 
activation. However, there is ambiguity: does “Close 
Edit” do the same operation as “Save”? 
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w Yahoo! Mews: Tep Staries (4) ron x Completion 


The number of news stories changes and the mini- 
configuration panel slides back out of the way. 


Figure 1-15. Configuring modules on the My Yahoo! page can be done directly in place 


Considerations 


There are some issues to consider when using Module Configuration. 


Visual noise 


Putting edit links on each module can be visually noisy. An alternative approach is to 
use the Group Edit pattern (as we saw in Figure 1-14) to place an edit link at the page 
level that turns on edit links for each module. When the “Done Editing” link is clicked, 
the links for each module are hidden. Again the trade-off is between visual noise and 
discoverability. 


Best Practices for Group Edit and Module Configuration 


Here are some best practices to keep in mind: 
Use an edit toggle when there are a number of items to edit and showing edit scaffolding 
would make the display visually noisy. 


Make activation and deactivation as similar as possible (Symmetry of Interaction). Switch- 
ing in and out of an editing mode should operate more like a toggle. 


Provide inline edit configuration for modules when configuration is an important feature. 


Provide a way to turn configuration on/off globally for module configuration when this is 
secondary to content display. 
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Guidelines for Choosing Specific Editing 
Patterns 


In-Page Edit provides a powerful way to make interfaces direct. Here are some general 
guidelines to think about when choosing an editing pattern: 


Whenever you have a single field on the page that needs editing, consider using the 
Single-Field Inline Edit. 


For multiple fields or more complex editing, use the Multi-Field Inline Edit. 


If you don't need inline context while editing, or the editing is something that de- 
mands the user’s full attention, use Overlay Edit. 


For grid editing, follow the pattern Table Edit. 


When dealing with multiple items on a page, Group Edit provides a way to balance 
between visual noise and discoverability. 


When providing direct configuring to modules, use the Module Configuration 
pattern. 
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Drag and Drop 


One of the great innovations that the Macintosh brought to the world in 1984 was Drag 
and Drop. Influenced by the graphical user interface work on Xerox PARC's Star In- 
formation System and subsequent lessons learned from the Apple Lisa, the Macintosh 
team invented drag and drop as an easy way to move, copy, and delete files on the user's 
desktop. 


It was quite a while before drag and drop made its way to the Web in any serious applica- 
tion. In 2000, a small startup, HalfBrain, launched a web-based presentation application, 
BrainMatter. It was written entirely in DHTML and used drag and drop as an integral part 
of its interface. 


Drag and drop showed up again with another small startup, Oddpost,' when it launched 
a web-based mail application (Figure 2-1) that allowed users to drag and drop messages 
between folders. 


* HalfBrain also created a full spreadsheet application written in DHTML prior to this. It included many of the 
features of Microsoft Excel. 


+ Some of the developers at Oddpost actually came from HalfBrain. Yahoo! later purchased Oddpost’s mail ap- 
plication to form the basis for the current Yahoo! Mail product. 
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3 Mipira eddpost.com  Oddpest jmiebuckbes) Microsoft Internet Lxplorer 
| Fio Edt wew Message Menagerie DABSX LO Depi atean 


Seat 

For Tun: Aqua Teen Hunger Force: Vol, 1: Dwc 2 

Wee recsved: MAalind Drive Mon, 75280 
For Thu: The Weds inthe Hall: Sosson 2; Disc 3 Wes, a 
We've recemwed: Mystery Science Theater 3000: Attack of the wec, & 
For Pri: Mystery Science Theater 3000: Attack of the Gert Lee Th. 
We've recetwed: Aqua Teen Munger Force: Vol. 2: Disc Z T 

Your Netfite Membership Passord 


Movie Shipped 


Aqua Teen jer Force: Vol. 1: 
Disc 2 
Sent to: Michael 


Figure 2-1. The Oddpost web mail client performed like a desktop mail application and included drag 
and drop as a key feature 


The biggest hindrance was the difficulty in saving the user’s state after a drag was com- 
pleted without refreshing the page. It was possible, but the underlying technology was not 
consistent across all browsers. Now that the technologies underlying Ajax’ have become 
widely known and a full complement of browsers support these techniques, Drag and 
Drop has become a more familiar idiom on the Web. 


Interesting Moments 


At first blush, drag and drop seems simple. Just grab an object and drop it somewhere. 
But, as always, the devil is in the details. There are a number of individual states at which 
interaction is possible. We call these microstates interesting moments: 


e How will users know what is draggable? 
e What does it mean to drag and drop an object? 
e Where can you drop an object, and where is it not valid to drop an object? 


e What visual affordance will be used to indicate draggability? 


* Jesse James Garrett, founder of Adaptive Path, originally defined the term Ajax as “Asynchronous JavaScript 
and XML.” However, it generally means being able to retrieve information or save state without refreshing the 
page—an integral ability for any rich interaction. 


t Bill Scott, author of this book, originally called these interaction events. Eric Miraglia, a former colleague of his 
at Yahoo!, coined the more colorful term interesting moments. 
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«+ During drag, how will valid and invalid drop targets be signified? 

+ Do you drag the actual object? 

e Or do you drag just a ghost of the object? 

e Or is it a thumbnail representation that gets dragged? 

e What visual feedback should be used during the drag and drop interaction? 


What makes it challenging is that there are a lot of events during drag and drop that can 
be used as opportunities for feedback to the user. Additionally, there are a number of ele- 
ments on the page that can participate as actors in this feedback loop. 


The Events 
There are at least 15 events available for cueing the user during a drag and drop interaction: 


Page Load 
Before any interaction occurs, you can pre-signify the availability of drag and drop. 
For example, you could display a tip on the page to indicate draggability. 


Mouse Hover 
The mouse pointer hovers over an object that is draggable. 


Mouse Down 
The user holds down the mouse button on the draggable object. 


Drag Initiated 
After the mouse drag starts (usually some threshold—3 pixels). 


Drag Leaves Original Location 
After the drag object is pulled from its location or object that contains it. 


Drag Re-Enters Original Location 
When the object re-enters the original location. 


Drag Enters Valid Target 
Dragging over a valid drop target. 


Drag Exits Valid Target 
Dragging back out of a valid drop target. 


Drag Enters Specific Invalid Target 
Dragging over an invalid drop target. 


Drag Is Over No Specific Target 
Dragging over neither a valid or invalid target. Do you treat all areas outside of valid 
targets as invalid? 


Drag Hovers Over Valid Target 
User pauses over the valid target without dropping the object. This is usually when a 
spring loaded drop target can open up. For example, drag over a folder and pause, the 
folder opens revealing a new area to drag into. 
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Drag Hovers Over Invalid Target 
User pauses over an invalid target without dropping the object. Do you care? Will you 
want additional feedback as to why it is not a valid target? 


Drop Accepted 
Drop occurs over a valid target and drop has been accepted. 


Drop Rejected 
Drop occurs over an invalid target and drop has been rejected. Do you zoom back 
the dropped object? 


Drop on Parent Container 
Is the place where the object was dragged from special? Usually this is not the case, 
but it may carry special meaning in some contexts. 


The Actors 


During each event you can visually manipulate a number of actors. The page elements 
available include: 


e Page (e.g., static messaging on the page) 

e Cursor 

e Tool Tip 

e Drag Object (or some portion of the drag object, e.g., title area of a module) 
e Drag Objects Parent Container 


e Drop Target 


Interesting Moments Grid 


That's 15 events times 6 actors. That means there are 90 possible interesting moments—each 
requiring a decision involving an almost unlimited number of style and timing choices. 


You can pull all this together into a simple interesting moments grid for Drag and Drop. 
Figure 2-2 shows an interesting moments grid for My Yahool. 


Tip 


You can use an interesting moments grid to capture any complex interaction. 


The grid is a handy tool for planning out interesting moments during a drag and drop 
interaction. It serves as a checklist to make sure there are no “holes” in the interaction. 
Just place the actors along the lefthand side and the moments along the top. In the grid 
intersections, place the desired behaviors. 
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Drop Target Norma Normal | Normal | insertion N/A N/A 


Figure 2-2. A simplified interesting moments grid for the original My Yahoo! drag and drop design; it 
provided a way to capture the complexities of drag and drop into a single page 


Purpose of Drag and Drop 


Drag and drop can be a powerful idiom if used correctly. Specifically it is useful for: 


Drag and Drop Module 
Rearranging modules on a page. 


Drag and Drop List 
Rearranging lists. 


Drag and Drop Object 
Changing relationships between objects. 


Drag and Drop Action 
Invoking actions on a dropped object. 


Drag and Drop Collection 
Maintaining collections through drag and drop. 


* A template for the interesting moments grid can be found at http://designingwebinterfaces.com/resources/ 
interestingmomentsgrid.xIs. 
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Drag and Drop Module 


One of the most useful purposes of drag and drop is to allow the user to directly place 
objects where she wants them on the page. A typical pattern is Drag and Drop Modules 
on a page. Netvibes provides a good example of this interaction pattern (Figure 2-3). 


Normal display style 


`> Washingten, DC C. Web Sead 
Saturday Sode Monday Tends i| A < cee 
O = eS G Modules are displayed without an explicit cue for 
S esse drag and drop. 
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2 Der erne forvag No search o 
J Ural weed E om 
Orech your smal on Netvibes B | 
Step 1 out af 2 : Please select yaur e-mai HH Youtube 
Erroia 
"UE -x © wese) Invitation to drag 
sat N A Taney G S A 
Moving the mouse to a module’s header changes 
B 5 * Sev) the cursor to indicate that the item is draggable. 
~ ‘anys weya dina 
D Dey Daur Foro Mo search o 
J © mel waari Gess to 
Check your emad an Metvbes & 
Step 1 out of 2 : Pease select you e-mai H Youtub 
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Dragging 
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i Sørday Mooy Teste] The module being moved is dragged directly. A 


CS i las} ripped-out “hole” is exposed where the module 
was dragged from. 
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15 Day Vægte horecen 
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g Comal wizard 


Crock your email pa metvibes 
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US Peceboek 


© 
0 
D 


nf 


Invitation to drop 


Dragging the module opens up a new hole indi- 


= a > Wagan ae & cating where the object will be dropped. 


The hole always indicates where the object will go 
when dropped. 


Figure 2-3. Netvibes allows modules to be arranged directly via drag and drop; the hole cues what will 
happen when a module is dropped 


Considerations 


Netvibes allows its modules to be rearranged with drag and drop. A number of interesting 
moments decide the specific interaction style for this site. Figure 2-4 shows the interesting 
moments grid for Netvibes. 


Mouse Hover 


Cursor Change tos 
hand with finger 
pointing." 


Dragged 
Module 


Dragged 
Modules 
Original 
Location 


Drop 
Target 


Drag Hovers over Drop 
Mouse Down Drag Initiated Valid Target" Accepted 
Change toa No change.” Cursor returns 
hend/move to normal 
cursor. style 
Module is Dragged 
dragged with full version is 
opacity. removed, 
Hole is shown as Hole is 
a red dashed removed, 
outline. 
Hole (red dashed Modute is 
outline) is moved to placed in the 
the new drop spot. new location, 
Other modules shift to 
close prior hole. 
* On drag * Triggers when the 
initiated, it dragged module's titie 
would be better bar has moved past 
to switch to a the midpoint of the 
hand that looks dragged over 
tke è grab. module's header. 


Figure 2-4. Interesting moments grid for Netvibes: there are 20 possible moments of interaction; 
Netvibes specifically handles 9 of these moments 


While dragging, it is important to make it clear what will happen when the user drops the 
dragged object. There are two common approaches to targeting a drop: 


e Placeholder target 


e Insertion target 
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Placeholder target 


Netvibes uses a placeholder (hole with dashed outline) as the drop target. The idea (il- 
lustrated in Figure 2-5) is to always position a hole in the spot where the drop would 
occur. When module © starts dragging, it gets “ripped” out of the spot. In its place is the 
placeholder target (dashed outline). As © gets dragged to the spot between © and @, the 
placeholder target jumps to fill in this spot as Ø moves out of the way. 


Drag starts. Hole opens. Module shits. New hole. Dropped into hole 


113 yy 3 213 2113 
214 2|4 


4 4 


Figure 2-5. A placeholder target always shows where the dragged module will end after the drop; 
module 1 is being dragged from the upper right to the position between modules 3 and 4 


The hole serves as a placeholder and always marks the spot that the dragged module will 
land when dropped. It also previews what the page will look like (in relation to the other 
modules) if the drop occurs there. For module drag and drop, the other modules only 
slide up or down within a vertical column to make room for the dragged module. 


One complaint with using placeholder targets is that the page content jumps around a lot 
during the drag. This makes the interaction noisier and can make it harder to understand 
what is actually happening. This issue is compounded when modules look similar. The 
user starts dragging the modules around and quickly gets confused about what just got 
moved. One way to resolve this is to provide a quick animated transition as the modules 
move. It is important, however, that any animated transitions not get in the way of the 
normal interaction. In Chapter 11, we will discuss timing of transitions in detail. 


There is a point in Figure 2-5 where the placeholder shifts to a new location. What deter- 
mines placeholder targeting? In other words, what determines where the user is intending 
to place the dragged object? The position of the mouse, the boundary of the dragged ob- 
ject, and the boundary of the dragged-over object can all be used to choose the module’s 
new location. 


Boundary-based placement. Since most sites that use placeholder targeting drag the module 
in its original size, targeting is determined by the boundaries of the dragged object and 
the boundaries of the dragged-over object. The mouse position is usually ignored be- 
cause modules are only draggable in the title (a small region). Both Netvibes and iGoogle 
take the boundary-based approach. But, interestingly, they calculate the position of their 
placeholders differently. 
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In Netvibes, the placeholder changes position only after the dragged modules title bar has 
moved beyond the dragged-over modules title bar. In practice, this means if you are moving 
a small module to be positioned above a large module, you have to move it to the very top of 
the large module. In Figure 2-6 you have to drag the small "To Do List” module all the way 
to the top of the "Blog Directory” module before the placeholder changes position. 
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Figure 2-6. In Netvibes, dragging a small module to be placed above a large module requires dragging a 
large distance; the “To Do List” has to be dragged to the top of the “Blog Directory” module 


In contrast, moving the small module below the large module actually requires less drag 
distance since you only have to get the title bar of the small module below the title bar of 
the large module (Figure 2-7). 
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Figure 2-7. Dragging a small module below a large module requires a smaller drag distance; since the 
targeting is based on the header of the dragged-over module, the drag distance in this scenario is less 
than in the previous figure 


This approach to boundary-based drop targeting is non-symmetrical in the drag distance 
when dragging modules up versus dragging modules down (Figure 2-8). 


Download at WoweBook.Com 


34 Chapter 2: Drag and Drop 


Orag marts Hole opens. | Mower aboue M) top Mower bellow W) top Power below B4 top 


MB 22st 2n3 


4 4 
5 
2 3 1 
4 1 
5 


Figure 2-8. The Netvibes approach requires the dragged object’ title to be placed above or below a 
module before the placement position changes; this results in inconsistent drag distances 


A more desirable approach is that taken by iGoogle. Instead of basing the drag on the title 
bar, iGoogle calculates the placeholder targeting on the dragged-over object’s midpoint. 
In Figure 2-9, the stock market module is very large (the module just above the moon 
phase module). 


Figure 2-9. When dragging a module downward, iGoogle moves the placeholder when the bottom of 
the dragged module crosses the midpoint of the object being dragged over; the distance to accomplish a 
move is less than in the Netvibes approach 


With the Netvibes approach, you would have to drag the stock module's title below the 
moon phase modules title. iGoogle instead moves the placeholder when the bottom of the 
dragged module (stock module) crosses the midpoint of the dragged over module (moon 
phase module). 
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What happens when we head the other way? When we drag the stock module up to place 
it above the moon phase module, iGoogle moves the placeholder when the top of the 
stock module crosses the midpoint of the moon phase module (Figure 2-10). 


ae Dee Peete 


Figure 2-10. When dragging a module upward, iGoogle moves the placeholder when the top of the 
dragged module crosses the midpoint of the object being dragged over; dragging modules up or down 
requires the same effort, unlike in the Netvibes example 


As Figure 2-11 illustrates, module © is dragged from the first column to the second col- 
umn, the placeholder moves above module ©. As module © is dragged downward, the 
placeholder moves below © and Ø as the bottom of module © crosses their midpoints. 
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Figure 2-11. To create the best drag experience, use the original midpoint location of the module being 
dragged over to determine where to drop the dragged module: module 1 is being dragged into the 
position just below module 4 
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The net result is that the iGoogle approach feels more responsive and requires less mouse 
movement to position modules. Figure 2-12 shows the interesting moments grid for the 
iGoogle drag and drop interaction. 


Drag Hovers over Drop 
Mouse Hover Mouse Down Drag initiated Valid Target* Accepted 
Cursor Change toa Change to normal 
hand pointer, style." 
Sagney Oregged 
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removed. 
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Modules a gray, thick, removed. 
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to switch to a hand instantly on mid-point of the 
that looks ike it mouse down. dragged object enters 
grabbed the module. a vald drop target. 


Figure 2-12. Interesting moments grid for iGoogle: as in the Netvibes grid, there are 20 possible 
moments of interaction; iGoogle specifically handles 8 of these moments 


Insertion target 


Placeholder positioning is a common approach, but it is not the only way to indicate drop 
targeting. An alternate approach is to keep the page as stable as possible and only move 
around an insertion target (usually an insertion bar). A previous version of My Yahoo! used 
the insertion bar approach as the dragged module was moved around (see Figure 2-13). 


Figure 2-13. My Yahoo! uses the insertion bar approach 
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While the module is dragged, the page remains stable. No modules move around. Instead 
an insertion bar marks where the module will be placed when dropped. 


This technique is illustrated in Figure 2-14. When module © is dragged to the position 
between © and @, an insertion bar is placed there. This indicates that if © is dropped, 
then @ will slide down to open up the drop spot. 
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Figure 2-14. Using an insertion bar keeps the page stable during dragging and makes it clear how 
things get rearranged when the module is dropped 


Unlike with the placeholder target, the dragged module © is usually represented with a 
slightly transparent version of the module (also known as ghosting). This is the approach 
shown in Figure 2-13 in an earlier version of My Yahoo!. In the most current version, full- 
size module dragging has been replaced with a thumbnail representation (the small gray 
outline being dragged in Figure 2-15). This is somewhat unfortunate since the small gray 
outline is not very visible. 


Dragging a module down 


él Note the gray outline being dragged. The small 
gray rectangle represents the dragged module 
(the Facebook module). 


Since the drag representation is above the mid- 
point of the Yahoo! Mail Preview module, no 
+ change is indicated for a drop. 


Search By: Caty & State or DP 
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Figure 2-15. My Yahoo! uses a small gray rectangle to represent the dragged module 


As you can see in Figure 2-16, the My Yahoo! page makes different decisions about how 
drag and drop modules are implemented as compared to Netvibes (Figure 2-4) and 
iGoogle (Figure 2-12). 
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Figure 2-16. My Yahoo! uses 15 of the possible 32 moments to interact with the user during drag and 
drop; the biggest difference between My Yahoo!, Netvibes, and iGoogle is the insertion bar placement— 
another subtle difference is how drag gets initiated 
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Drag distance 


Dragging the thumbnail around does have other issues. Since the object being dragged is 
small, it does not intersect a large area. It requires moving the small thumbnail directly 
to the place it will be dropped. With iGoogle, the complete module is dragged. Since the 
module will always be larger than the thumbnail, it intersects a drop target with much less 
movement. The result is a shorter drag distance to accomplish a move. 


Tip 


Keep in mind that Drag and Drop takes additional mouse dexterity. If possible, 
shorten the necessary drag distance to target a drop. 


Drag rendering 


How should the dragged object be represented? Should it be rendered with a slight trans- 
parency (ghost)? Or should it be shown fully opaque? Should a thumbnail representation 
be used instead? 


As shown earlier, My Yahoo! uses a small gray rectangle to represent a module (Figure 2-15). 
Netvibes represents the dragged module in full size as opaque (shown back in Figure 2-3), 
while iGoogle uses partial transparency (Figure 2-17). The transparency (ghosting) ef- 
fect communicates that the object being dragged is actually a representation of the dragged 
object. It also keeps more of the page visible, thus giving a clearer picture of the final result 
of a drop. 
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Figure 2-17. On iGoogle the dragged module Top Stories is given transparency to make it easier to see 
the page and to indicate that we are in a placement mode 


Ghosting the module also indicates that the module is in a special mode. It signals that the 
module has not been positioned; instead, it is in a transitional state. 
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Tip 
For Drag and Drop Modules, use the module's midpoint to control the drop targeting. 


Of the various approaches for Drag and Drop Modules, iGoogle combines the best ap- 
proaches into a single interface: 


Placeholder targeting 
Most explicit way to preview the effect. 


Midpoint boundary 
Requires the least drag effort to move modules around. 


Full-size module dragging 
Coupled with placeholder targeting and midpoint boundary detection, it means drag 
distances to complete a move are shorter. 


Ghost rendering 
Emphasizes the page rather than the dragged object. Keeps the preview clear. 


Best Practices for Drag and Drop Module 


Here are some best practices to keep in mind: 
Use the placeholder approach when showing a clear preview during drag is important. 
Use the insertion bar approach when you want to avoid page jitter. 
Use the midpoint of the dragged object to determine drag position. 
Use a slightly transparent version of the object being dragged (ghost) instead of an 
opaque version. 
Ifyou drag thumbnail representations, use the insertion bar targeting approach. 


Drag and Drop List 


Rearranging lists is very similar to rearranging modules on the page but with the added 
constraint of being in a single dimension (up/down or left/right). The Drag and Drop 
List pattern defines interactions for rearranging items in a list. 


37 Signals Backpackit allows to-do items to be rearranged with Drag and Drop List (Fig- 
ure 2-18). 
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Figure 2-18. Backpackit allows to-do lists to be rearranged directly via drag and drop 
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Considerations 


Backpackit takes a real-time approach to dragging items. Since the list is constrained, this 
is a natural approach to moving objects around in a list. You immediately see the result 
of the drag. 


Placeholder target 

This is essentially the same placeholder target approach we discussed earlier for drag- 
ging and dropping modules. The difference is that when moving an item in a list, we are 
constrained to a single dimension. Less feedback is needed. Instead of a “ripped-out” area 
(represented earlier with a dotted rectangle), a simple hole can be exposed where the ob- 
ject will be placed when dropped. 


A good example from the desktop world is Apples iPhoto. In a slideshow, you can easily 
rearrange the order of photos with drag and drop. Dragging the photo left or right causes 
the other photos to shuffle open a drop spot (Figure 2-19). 
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Figure 2-19. iPhoto uses cursor position: when the cursor crosses a threshold (the edge of the next 
photo), a new position is opened up 


The difference between iPhoto and Backpackit is that instead of using the dragged photo's 
boundary as the trigger for crossing a threshold, iPhoto uses the mouse cursor position. 
In the top row of Figure 2-19, the user clicked on the right side of the photo. When the 
cursor crosses into the left edge of the next photo, a new space is opened. In the bottom 
row, the user clicked on the top left side of the photo. Notice in both cases it is the mouse 
position that determines when a dragged photo has moved into the space of another pho- 
to, not the dragged photo's boundary. 


Tip 
In a Drag and Drop List, use the mouse position to control where the item will be 
dropped. 
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Insertion target 


Just as with Drag and Drop Modules, placeholder targeting is not the only game in town. 
You can also use an insertion bar within a list to indicate where a dropped item will land. 
Netflix uses an insertion target when movies are dragged to a new location in a user's 
movie queue (Figure 2-20). 
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Figure 2-20. A Netflix queue can be rearranged via drag and drop 


The upside to this approach is that the list doesn’t have to shuffle around during drag. The 
resulting experience is smoother than the Backpackit approach. The downside is that it is 
not as obvious where the movie is being positioned. The insertion bar appears under the 
ghosted item. The addition of the brackets on the left and right of the insertion bar is an 
attempt to make the targeting clearer. 
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Non—drag and drop alternative 


Besides drag and drop, the Netflix queue actually supports two other ways to move ob- 
jects around: 


e Edit the row number and then press the “Update DVD Queue” button. 
e Click the “Move to Top” icon to pop a movie to the top. 


Modifying the row number is straightforward. It’s a way to rearrange items without drag 
and drop. The “Move to Top” button is a little more direct and fairly straightforward (if 
the user really understands that this icon means “move to top”). Drag and drop is the least 
discoverable of the three, but it is the most direct, visual way to rearrange the list. Since 
rearranging the queue is central to the Netflix customer’s satisfaction, it is appropriate to 
allow multiple ways to do so. 


Hinting at drag and drop 


When the user clicks the “Move to Top” button, Netflix animates the movie as it moves 
up. But first, the movie is jerked downward slightly and then spring-loaded to the top 
(Figure 2-21). 
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Figure 2-21. When a movie is moved to the top with the “Move to Top” button, the movie jerks down 
slightly, then springs to the top 


The combination of the downward jerk and then the quick animation to the top gives a 
subtle clue that the object is draggable. This is also an interesting moment to advertise 
drag and drop. After the move to top completes, a simple tip could appear to invite users 
to drag and drop. The tip should probably be shown only once, or there should be a way 
to turn it off. Providing an invitation within a familiar idiom is a good way to lead users 
to the new idiom. 


Tip 
If drag and drop is a secondary way to perform a task, use the completion of the famil- 
iar task as an opportunity invite the user to drag and drop the next time. 


Drag lens 


Drag and drop works well when a list is short or the items are all visible on the page. 
But when the list is long, drag and drop becomes painful. Providing alternative ways 
to rearrange is one way to get around this issue. Another is to provide a drag lens while 
dragging. 


A drag lens provides a view into a different part of the list that can serve as a shortcut 
target. It could be a fixed area that is always visible, or it could be a miniature view of 
the list that provides more rows for targeting. The lens will be made visible only during 
dragging. A good example of this is dragging the insertion bar while editing text on the 
iPhone (Figure 2-22). 
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Figure 2-22. The iPhone provides a drag magnifier lens that makes it easier to position the cursor 


Best Practices for Drag and Drop List 


Here are some best practices to keep in mind: 


f possible, drag the items in a list in real time using the placeholder target approach. 
Use the mouse position for drag target positioning. 
f the goal is speed of dragging or if dragged items are large, consider using the insertion 


arget approach, as rendering an insertion bar is inexpensive compared to dynamically 
rearranging the list. 


Since drag and drop in lists is not easily discoverable, consider providing an alternate way 
o rearrange the list. 


When the user rearranges the list with an alternate method, use that moment for a one- 
ime advertisement for drag and drop. 


Drag and Drop Object 


Another common use for drag and drop is to change relationships between objects. This 
is appropriate when the relationships can be represented visually. Drag and drop as a 
means of visually manipulating relationships is a powerful tool. 


Cogmap is a wiki for organizational charts. Drag and Drop Object is used to rearrange 
members of the organization (Figure 2-23). 
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Figure 2-23. Cogmap allows organizational charts to be rearranged on the fly with drag and drop 
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Considerations 


When object relationships can be clearly represented visually, drag and drop is a natural 
choice to make these type of changes. Cogmap uses the target insertion approach. This 
allows the dragging to be nondistracting, since the chart does not have to be disturbed 
during targeting. 


Drag feedback: Highlighting 


Bubbl.us, an online mind-mapping tool, simply highlights the node that will be the new 
parent (Figure 2-24). 
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Figure 2-24. Bubbl.us provides a visual indication of which node the dropped node will attach itself to 


In both cases, immediate preview is avoided since it is difficult to render the relationships 
in real time without becoming unnecessarily distracting. 


Looking outside the world of the Web, the desktop application Mind Manager also uses 
highlighting to indicate the parent in which insertion will occur. In addition, it provides 
insertion targeting to give a preview of where the employee will be positioned once 
dropped (Figure 2-25). 
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Figure 2-25. Mind Manager is a desktop tool that uses a combination of insertion targeting plus a clear 
preview of the drop 
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Drag feedback: Dragged object versus drop target 


As we mentioned at the beginning of this chapter, one of the first serious uses for drag 


and drop was in the Oddpost web mail application. Oddpost was eventually acquired by 
Yahoo! and is now the Yahoo! Mail application. 


Yahoo! Mail uses drag and drop objects for organizing email messages into folders (Figure 
2-26). 
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Figure 2-26. Yahoo! Mail allows messages to be dragged to folders 


Instead of signaling that a drop is valid or invalid by changing the visual appearance of the 


area dragged over, Yahoo! Mail shows validity through the dragged object. When a drop 
will be invalid (Figure 2-27, left): 


+ The dragged object’s icon becomes a red invalid sign. 

e If over an invalid folder, the folder is highlighted as well. 
When a drop will be valid (Figure 2-27, right): 

e The dragged objects icon changes to a green checkmark. 

+ The drop target highlights. 
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Another approach is to signal both validity and location in the drop target itself. In this 
case you would highlight the valid drop target when it is dragged over and not highlight 
the drop target if it is invalid. In Yahoo! Mails interaction, the signaling of validity and 
where it can be dropped are kept separate. This allows a drag to indicate that a target is a 
drop target, just not valid for the current object being dragged.” 


Q From Subpet | O From Subject 
Bill Scott User Interactions Bill Scott User Interactions 
Bill Scott Welcome to Yahoo! Mail Bill Scott Welcome to Yahoo! Mail 


Figure 2-27. Yahoo! Mail mistakenly shows a valid indicator instead of an invalid indicator for a 
message when it is dragged back over the inbox 


One odd situation occurs when you first start dragging a message and then later drag it 
back into the inbox area (Figure 2-27). At first it shows the inbox as an invalid drop area. 
Then it shows it as a valid drop area. Recall in our discussion on the various interesting 
events that initially dragging over your “home area” and then later dragging back into it 
are all events that should be considered during drag and drop. Here the interface needs to 
display the same indicator in both cases. 


Tip 
Feedback during dragging is key to providing a clear Drag and Drop Object interaction. 


Drag feedback: Drag positioning 


Another slightly troublesome approach is positioning the dragged object some distance 
away from the mouse (Figure 2-28). The reason the object is positioned in this manner is 
to avoid obscuring dragged-over folders. While this may alleviate that problem, it intro- 
duces a second problem: when you initiate the drag, the dragged message jumps into the 
offset position. Instead of conveying that the first message in the list is being dragged, it 
feels like the second message in the list is being dragged (Figure 2-28, bottom). 


© From Subject Before drag initiated 
ia User Interactions The user is about to drag the first message in the list. 
Bill Scott Welcome to Yahoo! Mail 


* For example, while a contact may be dragged into the Contacts folder, a message may not. In either situa- 
tion, the Contacts folder will highlight. However, the dragged contact will show a green checkmark, while the 
dragged message will show a red invalid sign. 
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Offset drop object 


The dragged object appears below the midpoint of 
the second message after drag is initiated. Targeting 
is confusing—is it the mouse or the object that de- 
termines targeting? 


Figure 2-28. By offsetting the drag object a large distance from the cursor, the message feels disjointed 
from the actual object being dragged; in fact, it looks like it is closer to the second message in the list 
instead of the first message actually being dragged 


Drag feedback: Drag start 


In Yahoo! Mail, message dragging is initiated when the mouse is dragged about four or 


five pixels (Figure 2-29). 


Figure 2-29. Yahoo! Mail requires the user to drag four or five pixels to initiate a drag (notice the cursor 
is at the top of the “B” and has to be dragged 2/3 of the way down to start the drag); this gives the 
impression that the message is stuck and not easy to drag. Reducing this value will make messages feel 
easier to drag 


A good rule of thumb on drag initiation comes from the Apple Human Interface 
Guidelines: 


Your application should provide drag feedback as soon as the user drags an item at 
least three pixels. Ifa user holds the mouse button down on an object or selected text, 
it should become draggable immediately and stay draggable as long as the mouse 
remains down.” 


It might seem like a small nit, but there is quite a difference between starting a drag after 
three pixels of movement versus four or five pixels. The larger value makes the object feel 
hard to pull out of its slot to start dragging. On the flip side, starting a drag with too small 
a value can cause drag to initiate accidentally, usually resulting in the interface feeling too 
finicky. 


Tip 


Start a drag when the object is dragged three pixels or the mouse is held down for half 
a second. 


* See http://tinyurl.com/5aqd4k for the Apple Human Interface Guideline on drag feedback. 
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The only part of the Apple guideline that could be quibbled with is whether to start drag 
mode immediately on mouse down or wait about a half-second to start. Why not initiate 
the drag immediately? Certain devices, like pen input, are not as precise as mouse input. If 
you allow an object to be dragged and that object has other controls (like hyperlinks), you 
will want to allow the user to start a drag even if he clicks down over some element within 
the object (like a hyperlink). You will also want to allow him to just click the hyperlink and 
not have a drag accidentally initiate. Moving into drag mode immediately will preclude 
the ability to disambiguate between a click on an item within the object versus a drag start 
on the object itself. 


Best Practices for Drag and Drop Object 


Here are some best practices to keep in mind: 

f objects are represented in a complex visual relationship, use insertion targeting to indi- 
cate drop location (minimizes disturbing the page during drag). 
For parent/child relationships, highlight the parent as well to indicate drop location. 
f possible, reveal drag affordances on mouse hover to indicate draggability. 


nitiate drag when the mouse is dragged three pixels or if the mouse is held down for at 
east half a second. 


Position dragged objects directly in sync with the cursor. Offsetting will make the drag 
feel disjointed. 


When hovering over a draggable object, change the cursor to indicate draggability. 


Drag and Drop Action 


Drag and drop is also useful for invoking an action or actions on a dropped object. The 
Drag and Drop Action is a common pattern. Its most familiar example is dropping an 
item in the trash to perform the delete action. 


Normally uploading files to a web application includes pressing the upload button and 
browsing for a photo. This process is repeated for each photo. 


When Yahoo! Photos was relaunched in 2006, it included a drag and drop upload feature. 
It allowed the user to drag photos directly into the upload page. The drop signified the 
upload action (Figure 2-30). 
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Normal display state 


"Add Photos” allows either browsing 
for photos or simply dragging and 
dropping them into the target zone 
below. 


Invitation to drag 


The invitation is clear. By using the 
drop target area as an advertisement 
for the drag feature, the process is dis- 
coverable (as well as natural). 


Dropped 


Photos dropped are collected into an 
upload area. Pressing “Start Upload” 
starts the uploading process. 


Completed 


All items are marked Complete when 
finished. 


Figure 2-30. Yahoo! Photos provided a way to upload files directly to the site via drag and drop from 


the user's filesystem into the web page 
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Considerations 


This is not a trivial implementation. But it does clearly illustrate the benefit of drag and 
drop for operating on a set of files. The traditional model requires each photo to be se- 
lected individually for upload. Drag and drop frees you to use whatever browsing method 
is available on your system and then drop those photos for upload. 


Anti-pattern: Artificial Visual Construct 


Unfortunately, drag and drop can sometimes drive the design of an interface instead of 
being an extension of a natural interface. These interactions are almost always doomed, 
as they are the tail wagging the proverbial dog. Rating movies, books, and music is a com- 
mon feature found on many sites. But what happens if you try to use drag and drop to 
rate movies? 


In Figure 2-31 you can rate movies by dragging them into three buckets: “Loved It’, 
“Haven't Seen It’; or “Loathed It”. 
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Figure 2-31. Drag and drop recommendations: the hard way to do ratings 


While this certainly would work, it is wrong for several reasons: 


Non-obvious 
Requires some additional instructions to “Drag the DVDs into the boxes below” in 
order for the user to know how to rate the movies. 
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Too much effort 
Requires too much user effort for a simple task. The user needs to employ mouse 
gymnastics to simply rate a movie. Drag and drop involves these discrete steps: target, 
then drag, then target, and then drop. The user has to carefully pick the movie, drag 
it to the right bucket, and release. 


Too much space 
Requires a lot of visual space on the page to support the idiom. Is it worth this amount 
of screen real estate? 


Direct rating systems (thumbs up/down, star ratings, etc.) are a much simpler way to rate 
a movie than using an Artificial Visual Construct. A set of stars is an intuitive, compact, 
and simple way to rate a movie (Figure 2-32). 
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Figure 2-32. Instead of drag and drop, Netflix uses a simple set of stars to rate a movie 


You might still be tempted to take this approach if you have a lot of objects that you want 
to add as favorites or set an attribute on. Don't give in. This method still falls way short 
since the amount of space needed for this far outweighs simpler approaches such as pro- 
viding an action button for the selected objects. 


Tip 
Drag and drop should never be forced. Don't create an artificial visual construct to 
support it. 


Natural Visual Construct 


Another example of Drag and Drop Action is demonstrated in Google Maps. A route is 
visually represented on the map with a dark purple line. Dragging an arbitrary route point 
to a new location changes the route in real time (Figure 2-33). 
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Normal display state 


Route is shown in dark purple. 


Invitation to drag 
Hovering over any part of the route provides a 


draggable circle (route point) with a tool tip saying 
“Drag to change route” 


Dragging 


We want to stay on the east side of the bay and 
cross the San Mateo bridge. Dragging the route 
bubble back over the bridge will reroute our trip. 


Dropped 


The route changes as we drag. Dropping com- 
pletes the rerouting action. 


Figure 2-33. Rerouting in Google Maps is as simple as drag and drop 
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This is the opposite of the Artificial Visual Construct anti-pattern. The route is a Natural 
Visual Construct. Since anywhere along the route is draggable, there are a lot of opportu- 
nities to discover the rerouting bubble. When the route is being dragged, Google dynami- 
cally updates it. The constant feedback forms the basis of a Live Preview (which we will 
discuss in Chapter 13). 


Best Practices for Drag and Drop Action 


Here are some best practices to keep in mind: 

Use Drag and Drop Actions sparingly in web interfaces, as they are not as discoverable 
or expected. 

Provide alternate ways to accomplish the action. Use the Drag and Drop Action as a 
shortcut mechanism. 

Dor't use drag and drop for setting simple attributes. Instead use a more direct approach 
o setting attributes on the object. 


Don't construct an artificial visual representation for the sole purpose of implementing 
drag and drop. Drag and drop should follow the natural representation of the objects in 
he interface. 


Provide clear invitations on hover to indicate the associated action. 


Drag and Drop Collection 


A variation on dragging objects is collecting objects for purchase, bookmarking, or saving 
into a temporary area. This type of interaction is called Drag and Drop Collection. Drag 
and drop is a nice way to grab items of interest and save them to a list. The Laszlo shop- 
ping cart example illustrates this nicely (Figure 2-34). 
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Invitation to drag 


You can add to the cart with the “+ cart” button or 
you can drag the item to the shopping cart. If you 
use the button, the item flies to the cart; the cart 
bumps open and closed briefly to indicate that the 
item has been entered. 


Dragging 


The item gets a dragging treatment. 


Dropped 


The cart is populated with the new item. 


Figure 2-34. This Laszlo shopping cart demo uses both drag and drop and a button action to add items 


to its shopping cart 


Considerations 


There are a few issues to consider in this example. 


Discoverability 


Drag and drop is a natural way collect items for purchase. It mimics the shopping experi- 
ence in the real world. Grab an item. Drop it in your basket. This is fast and convenient 
once you know about the feature. However, as a general rule, you should never rely solely 
on drag and drop for remembering items. 
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Parallel, more explicit ways to do the same action should be provided. In this example, 
Laszlo provides an alternative to dragging items in the cart. Notice the "+ cart” button in 
Figure 2-34. Clicking this button adds the item to the shopping cart. 


Best Practices for Drag and Drop Collection 


Here are some best practices to keep in mind: 
Use as an alternate way to collect items (e.g., a shopping cart). 
When a drag gets initiated, highlight the valid drop area to hint where drop is available. 
Provide alternate cues that drag and drop into collections as available. 


Teachable moment 


When providing alternates to drag and drop, it is a good idea to hint that dragging is an 
option. In the Laszlo example, clicking the "+ cart” button causes the shopping cart tray 
to bump slightly open and then closed again. This points to the physicality of the cart. Us- 
ing another interaction as a teachable moment to guide the user to richer interactions is a 
good way to solve discoverability issues. 


Tip 
Look for opportunities for teachable moments in the interface leading users to ad- 
vanced features. 


The Challenges of Drag and Drop 


As you can see from the discussion in this chapter, Drag and Drop is complex. There are 
four broad areas where Drag and Drop may be employed: Drag and Drop Module, Drag 
and Drop List, Drag and Drop Object, and Drag and Drop Action. And in each area, 
there are a large number of interesting moments that may be handled in numerous ways. 
Being consistent in visual and interaction styles across all of these moments for all of these 
types of interactions is a challenge in itself. And keeping the user informed throughout 
the process with just the right amount of hints requires design finesse. In Chapter 10, we 
explore some ways to bring this finesse into Drag and Drop. 
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General Best Practices for Drag and Drop 


is available. 


Keep page jitter to a minimum while dragging objects. 


nitiate dragging if the user presses the mouse down and moves the mouse three pixels, 
or if she holds the mouse down for at least half a second. 


Use drag and drop for performing direct actions as an alternate method to more direct 
mechanisms in the interface. 


Hint at the availability of drag and drop when using alternatives to drag and drop. 


Pay attention to all of the interesting moments during drag and drop. Remember, you 
must keep the user informed throughout the process. 


Use Invitations (discussed more in Chapters 9 and 10) to cue the user that drag and drop 
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Direct Selection 


When the Macintosh was introduced, it ushered into the popular mainstream the ability 
to directly select objects and apply actions to them. Folders and files became first-class 
citizens. Instead of a command line to delete a file, you simply dragged a file to the trash- 
can (Figure 3-1). 


Figure 3-1. DOS command line for deleting a file versus dragging a file to the trash on the Macintosh 


Treating elements in the interface as directly selectable is a clear application of the Make 
It Direct principle. On the desktop, the most common approach is to initiate a selection 
by directly clicking on the object itself. We call this selection pattern Object Selection 
(Figure 3-2). 


=i reve 


animate-igoogle- brighten-wayfaring- 
dropobvious tiff lightbox-O L.tiff 
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Figure 3-2. Files can be selected directly on the Macintosh; Object Selection is the most common 
pattern used in desktop applications 


In this chapter we will look at the following types of selection patterns: 
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Toggle Selection 
Checkbox or control-based selection. 


Collected Selection 
Selection that spans multiple pages. 


Object Selection 
Direct object selection. 


Hybrid Selection 
Combination of Toggle Selection and Object Selection. 


Toggle Selection 


The most common form of selection on the Web is Toggle Selection. Checkboxes and 
toggle buttons are the familiar interface for selecting elements on most web pages. An 
example of this can be seen in Figure 3-3 with Yahoo! Mail Classic. 


Inbox Upgrade to the all-new Yahoo! Mail 
View: All Messages + Messages 1-2 of 2 First | Previous | Next | Lest 
(Delete |) spam | mark v || Move... = | 
Oe From @ Subject Date Cc Size 
©! Yahoo! Automatically transfer your email Sun, 7/27/08 11KB 
a Yahoo? Welcome to Yahoo! Thu, 7/24/08 725b 
Gesk Al! - Cigar All Messages 1-2 of 2 First | Previous | Next | Last 
Delete | spam | mark v| Move... | 


Figure 3-3. In Yahoo! Mail Classic a mail message can be selected by clicking on the corresponding row’s 
checkbox 


The way to select an individual mail message is through the row’s checkbox. Clicking on 
the row itself does not select the message. We call this pattern of selection Toggle Selec- 
tion since toggle-style controls are typically used for selecting items. 


Tip 
Toggle Selection is the easiest way to allow discontinuous selection. 


Once items have been check-selected, actions can be performed on them. Usually these 
actions are performed on the selection by clicking on a separate button (e.g., the Delete 
button). Gmail is a good example of actions in concert with Toggle Selection (Figure 
3-4). 
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0 Chi Cards 
v Selected items 
Sulect All, None, Ruud, Unmad, Stared, Unatarre Two mail messages have been selected. In addition 
f~ The Company Store to the checkbox selection, the selected items are 
iv] The Company Store highlighted in light yellow. 


Action triggered 


Delete will operate on the selected items. 


i 


C 
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$ 


Action completed 


The two selected email messages have been 
deleted! 


Figure 3-4. Gmail uses checkbox selection to operate on messages 
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Considerations 
Toggle Selection with checkboxes has some nice attributes: 
e Clear targeting, with no ambiguity about how to select the item or deselect it. 


e Straightforward discontinuous selection, and no need to know about Shift or Control- 
key ways to extend a selection. Just click the checkboxes in any order, either in a 
continuous or discontinuous manner. 


e Clear indication of what has been selected. 


Scrolling versus paging 

The previous examples were with paged lists. But what about a scrolled list? Yahoo! Mail 
uses a scrolled list to show all of its mail messages (Figure 3-5). While not all messages 
are visible at a time, the user knows that scrolling through the list retains the currently 
selected items. Since the user understands that all the messages not visible are still on the 
same continuous pane, there is no confusion about what an action will operate on—it will 
affect all selected items in the list. Sometimes the need for clarity of selection will drive the 
choice between scrolling and paging. 


Tip 


Toggle Selection is the normal pattern used when content is paged. Actions normally 
apply only to the selected items on the visible page. 
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E IE The Travelocity Team Travelooty Confirmation Tue, 7/1/08 5:05 PM 100 

C2 ÍS The Travelocity Team Travelocity Coréirmation Wed, 6/25/08 10:32 AM 


4 messages selected 


Figure 3-5. Yahoo! Mail uses a scrolled list for its messages; selection includes what is in the visible part 
of the list as well as what is scrolled out of view 


Making selection explicit 


With Yahoo! Bookmarks you can manage your bookmarks by selecting bookmarked pag- 
es and then acting on them. The selection model is visually explicit (Figure 3-6). 
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Selected items 


When items get selected, a status 
bar appears that keeps a tally of the 
number of items selected. The close 
button (x) is an alternate way to de- 
select the selected items. 


Tools act on selection 


When a tool is activated (“Edit Tags”) 
a command area slides into place. 


The status area becomes the title 
bar for the command area. 


Select all 


A “select all” checkbox selects all 
items on the page. The selection 
status then shows the current num- 
ber of items selected. 
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Figure 3-6. Yahoo! Bookmarks explicitly displays the state of the selection 


The advantage of this method is that it is always clear how many items have been selected. 
Visualizing the underlying selection model is generally a good approach. This direct ap- 
proach to selection and acting on bookmarks creates a straightforward interface. 


One interesting question: what happens when nothing is selected? One approach is to dis- 
able any actions that require at least one selected item. Yahoo! Bookmarks takes a different 
approach. Since buttons on the Web do not follow a standard convention, you often can’t 
rely on a color change to let you know something is not clickable. Yahoo! Bookmarks chose 
to make selection very explicit and make it clear when a command is invalid because noth- 
ing is selected (“No selection” in Figure 3-6). This is not normally the optimal way to handle 
errors. Generally, the earlier you can prevent errors, the better the user experience. 


Netflix disables the “Update DVD Queue” button when nothing is selected and enables it 
when a movie gets selected (Figure 3-7). 
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Ust Order Movie Tto irean Star Rating Gorre Expectec Aspiataty Ronowo 
t Mary Poncing eee Crvigren & Fame Now x 
: Tor ENE RK Chen A Panty tee 9 
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Figure 3-7. When nothing is selected, Netflix disables the “Update DVD Queue” button to prevent errors 
early 
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Best Practices for Toggle Selection 


Here are some best practices to keep in mind: 

Use Toggle Selection for selecting elements in a row. 

Use Toggle Selection to make it easy to select discontinuous elements. 

n a list, highlight the row in addition to the checkbox to make the selection explicit. 

When moving from page to page, actions should only operate on the items selected on 

hat page. 
offering a “select all” option, consider providing a way to select all elements across all 

pages. 

Provide clear feedback for the number of elements selected. 


possible, disable unavailable actions when nothing is selected. If you keep the action 
enabled, you will need additional interface elements to signal that it can't be completed. 


Collected Selection 


Toggle Selection is great for showing a list of items on a single page. But what happens if 
you want to collect selected items across multiple pages? Collected Selection is a pattern 
for keeping track of selection as it spans multiple pages. 


In Gmail, you can select items as you move from page to page. The selections are re- 
membered for each page. If you select two items on page one, then move to page two and 
select three items, there are only three items selected. This is because actions only operate 
on a single page. This makes sense, as users do not normally expect selected items to be 
remembered across different pages. 


Considerations 


Gmail does provide a way to select all items across different pages. When selecting all 
items on a individual page (with the “All” link), a prompt appears inviting the user to 
“Select all 2785 conversations in Spam”. Clicking that will select all items across all pages 
(Figure 3-8). The “Delete Forever” action will operate on all 2785 conversations, not just 
the 25 selected on the page. 
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Figure 3-8. Gmail provides a way to select all items across all pages, allowing the user to delete all items 
in a folder without having to delete all items on each page individually 


Keeping the selection visible 


The real challenge for multi-page selection is finding a way to show selections gathered 
across multiple pages. You need a way to collect and show the selection as it is being cre- 
ated. Here is one way that Collected Selection comes into play. 


LinkedIn uses Collected Selection to add potential contacts to an invite list (Figure 3-9). 


FT Sete a To mse cornacts chee FT Select A a 
= checktan neat fo Pe g => 
À 0 ramu ora! A 0 
remse 0 7 ame ar [im] 
amre 

i = Go O Å— == [im] 

r- 0 r o 

5 - g | ama Mea [i] 

ag veneer mpra mal - 
gs am _ vas selected cal 
5 - D FT amet um [im] rette selectes coal 


Figure 3-9. LinkedIn provides a holding place for saving selections across multiple pages 
The list of potential invitees is shown in a paginated list on the lefthand side. Clicking the 


checkbox adds them to the invite list. The invite list becomes the place where selected 
contacts across multiple pages are remembered. 
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Any name in the invite list can be removed by clicking the “X” button beside it. Once 
the complete list of invitees is selected, clicking the “Invite selected contacts” sends each 
selected contact a LinkedIn invitation. 


Collected Selection and actions 


When Yahoo! Photos was working its way through an early design of its Photo Gallery 
(see Figure 3-13, later in this chapter), the plan was to show all photos in a single, con- 
tinuous scrolling page (we discuss virtual scrolling in Chapter 7). In a long virtual list, 
the selection model is simple. Photos are shown in a single page and selection is easily 
understood in the context of this single page. 


However, due to performance issues, the design was changed. Instead of a virtual page, 
photos had to be chunked into pages. In order to support Collected Selection, Yahoo! 
Photos introduced the concept of a “tray” into the interface (Figure 3-10). On any page, 
photos can be dragged into the tray. The tray keeps its contents as the user moves from 
page to page. So, adding a photo from page one and three more from page four would 
yield four items in the tray. As a nice touch, the tray would make itself visible (by sliding 
into view) even when the user was scrolled down below the fold. 


All My Photos 


Figure 3-10. Yahoo! Photos used a “tray” to implement a form of Collected Selection; the confusing 
aspect was which actions in the menu operated on the tray versus the photos selected on the page 


There was a problem with the design, however. In the menu system it was hard to discern 
whether the user meant to operate on the selection (photos on the page could be selected 
through an Object Selection model) or on the collected items in the tray. To resolve this am- 
biguity, the drop-down menus contained two identical sets of commands. The first group of 
commands in the menu operated on the collected items in the tray. The second set of com- 
mands operated on the selected objects. Needless to say, this was confusing since it required 
the user to be fully aware of these two selection models when initiating a command. 


One way to remove this ambiguity would have been to have a single set of commands 
that operated on either the tray or the photos—depending on which had the focus. This 
would require a way to select the tray and a way to deselect it (by clicking outside the tray). 
A possible approach would be to slightly dim the photo gallery when the tray is selected 
(causing it to clearly have the focus), and do the opposite when the tray is not the focus. 
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Best Practices for Collected Selection 


to page. 


interface. 


Object Selection 


As we mentioned earlier, Toggle Selection is the most common type of selection on the 
Web. The other type of selection, Object Selection, is when selection is made directly on 
objects within the interface. 


Here are some best practices to keep in mind: 


- If you allow selection across page boundaries, accumulate the selected items (from each 
page) into a separate area. This makes the selection explicit even when moving from page 


- Use Collected Selection to blend Toggle Selection and Object Selection in the same 


- Watch out for ambiguity between items selected with Collected Selection and any items 
or objects that can be normally selected on the page. 


Sometimes using a checkbox does not fit in with the style of interaction desired. Laszlo’s 
WebTop mail allows the user to select messages by clicking anywhere in the row. The re- 
sult is that the whole row gets highlighted to indicate selection (Figure 3-11). 


Nothing selected 


Normal view when nothing is selected and the 


Update on taszio Mall Transi. MOUSE is NOt Over a Message. 


Hovered state 


When the mouse hovers over a row, the row is sub- 


gowebtop a Upcate on Laszio Mall Transi tly highlighted to indicate focus and what will be 


Important Notice Regarding | selected if the user clicks. 


& goWebtop Team goWebtop system status: e= 
© gowebtop Team 

= goWebtop Team Important Notice Regarding * 
® Laszio Team Tel us what you think! 

SI David Temkin The platform used te bulld L 
Ro Antony Campitelli Change your settings 

& antony Campitelli integrates accress book 

= Antony Campitelli Responsive as desktop softy 
== mansis mass eee a 

& goWebtop Team, goWebtop system status: e+ 
(= 

e goWebtop Team 

@ Laszio Team Tel Us what you think! 

@ Davie Temkin The platform used to bulig L 
© Antony Campitelli Change your settings 

2 Antony Campitelli integrates aceress dook 

== Antony Campitelli Responsive as desktop softe 
L eee — 


Download at WoweBook.Com 


Object Selection 71 
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Figure 3-11. Laszlo WebTop Mail uses highlighting to indicate row selection 


Considerations 


Desktop applications tend to use Object Selection. It is also natural that web-based mail 
applications that mimic desktop interactions employ this same style of selection. Instead of 
showing a control (like a checkbox), the object itself can be selected and acted on directly. 


Object Selection can be extended by holding down the Shift key while clicking on a dif- 
ferent item. The Command key (Macintosh) or Control key (Windows) can be used to 
individually add items in a discontinuous manner. The downside to this approach is that 
it is not obvious to use the modifier keys for extending the selection. Toggle Selection’s 
use of toggle buttons makes the selection extension model completely obvious. 


Flickr is a simple example of the keyboard being used to extend the selection in a web ap- 
plication. In the Organizr tool, multiple photos can be selected by using modifier keys to 
extend the selection (Figure 3-12). 


1,276 hems :: 4 selected | Solect af | Clear ewloction 


Figure 3-12. Flickr allows for discontinuous selection by using the Command/Control key to extend 
selection 


Desktop-style selection 


For now Object Selection is not as common on the Web. Given that most sites have been 
content-oriented, there have been few objects to select. Also, with the Web’s simple event 
model, Object Selection was not easy to implement. In typical web pages, keyboard events 
have rarely made sense since they are also shared with the browser. However, all of this is 
changing as the capabilities of web technologies continue to improve. 
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Most desktop Object Selection interactions include ways to use the mouse to drag-select 
objects. Yahoo! Photos introduced this same type of object selection to its photo gallery 
(Figure 3-13). Individually clicking on a photo selects it. Using the Shift key and clicking 
also extends the selection. In addition, using the Control key and clicking discontinuously 
selects photos. And like most desktop applications, you can drag a selection box around a 
group of items to add them to the selected set (in this case, photos). 


meet man All My Protas 


Figure 3-13. Yahoo! Photos 3.0 created a rich drag selection mechanism for selecting photos 


Best Practices for Object Selection 


Here are some best practices to keep in mind: 
Use Object Selection when selectable elements can be dragged. 
Use Object Selection when the application will simulate desktop style interactions. 
Allow standard modifier key extensions (Shift to extend selection; Ctrl for discontinuous 
selection). 
If possible, degrade Object Selection to Toggle Selection when browser capabilities 
are limited. 


Hybrid Selection 


Mixing Toggle Selection and Object Selection in the same interface can lead to a confus- 
ing interface. Referring back to Yahoo! Bookmarks, you'll see an odd situation arise during 
drag and drop (Figure 3-14). 
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Figure 3-14. In Yahoo! Bookmarks, one item is selected, but two items can be dragged by dragging on 
the unselected item 


3] 
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Considerations 


There are a few important issues to consider when using Hybrid Selection. 


Confusing two models 


In the left panel of Figure 3-14, one bookmark element is selected (notice the checkbox 
Toggle Selection). The second bookmark element (“Dr. Dobb's”) is unselected (the check- 
box is clear). In the right panel of Figure 3-14, clicking and dragging on the unselected 
bookmark element initiates a drag. The drag includes both the selected element and the 
unselected element. Since only one is shown as selected, this creates a confusing situation. 


This occurs because three things are happening in the same space: 
e ‘Toggle Selection is used for selecting bookmarks for editing, deleting, etc. 
e Object Selection is used for initiating a drag drop. 
e Mouse click is used to open the bookmark on a separate page. 


The problem is that more than one interaction idiom is applied to the same place on the 
same page. In this case, if you happen to try to drag, but instead click, you will be taken to 
a new page. And if you drag an unselected item, you now have two items selected for drag 
but only one shown as selected for other operations (Figure 3-14, right). This is definitely 
confusing. Simply selecting the item (automatically checking the box) when the drag starts 
would keep the selection model consistent in the interface. However, it might lead the user 
to expect a single click to also do the same (which it cannot since it opens the bookmark). 


So, mixing the two selection models together can be problematic. However, there is a way 
to integrate the Toggle Selection and Object Selection and have them coexist peacefully 
as well as create an improved user experience. 


Blending two models 


Yahoo! Mail originally started with the Toggle Selection model (Figure 3-15). When the 
new Yahoo! Mail Beta was released, it used Object Selection exclusively (Figure 3-16). 
But since there are advantages to both approaches, the most recent version of Yahoo! Mail 
incorporates both approaches in a Hybrid Selection (Figure 3-17). 
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Figure 3-15. Yahoo! Mail Classic uses Toggle Selection; it also highlights selected rows, but rows can 
only be selected by clicking the message’s checkbox 
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Figure 3-16. Yahoo! Mail Beta launched with Object Selection: no checkboxes were provided, and 
discontiguous selection could only be done by using keyboard modifiers 
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Figure 3-17. Yahoo! Mail now uses a hybrid approach: it incorporates both the Toggle Selection and the 
Object Selection patterns (messages can be selected with checkboxes or by clicking on the row); Toggle 
Selection selects the message without loading the message in the viewing pane 


Hybrid Selection brings with it the best of both worlds. You can use the checkbox selec- 
tion model as well as normal row selection. You get the benefit of explicit selection and 
simplified multiple selection that Toggle Selection brings. And you get the benefit of 
interacting with the message itself and direct object highlighting. 


Tip 


Combining Toggle Selection and Object Selection is a nice way to bridge a common 
web idiom with a common desktop idiom. 


There is an additional meaning applied to Toggle Selection versus Object Selection. 
Clicking on a row with the checkbox has the benefit of selecting the message without 
loading its contents in the message pane (think spam!). Clicking on a message itself will 
load the contents in the message pane. 


Best Practices for Hybrid Selection 


Here are some best practices to keep in mind: 


Use checkbox selection to select an object without opening it. 
Use object selection to select and open an object. 
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Principle Two 
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Keep It Lightweight 
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Digg is a popular news site where the community votes on its favorite stories. If you see a 
story on Digg that you like you can vote your approval with a simple click action on the 


“digg it” button (Figure P2-1). 
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Figure P2-1. role makes it easy to vote to digg articles with the “digg it” button next to each article 
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It wasn't always this simple. Kevin Rose founded Digg to democratize the finding of tech 
articles. In the earliest versions of Digg, the user had to complete a two-step process to 
digg a story (Figure P2-2). 


sorting by: [ newest | cidest | mast digs | aast cigs ] 


15M. AMD, Sony boost chip speeds by 24% 

“DBM and AMD have found a way to improve transistor performance by up to 24% without 
increasing the power drew - using @ tweaked implementation of Big Blue's ‘strained silicon’ 
process.” 
| da this story | comment | by: aneerymeus ] 


+1 digs added story 
Begin to earn credit for your digs - more info 


Figure P2-2. The first version of Digg required a two-page process to “digg” a story 
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In the current version of Digg it's much simpler—just click the "digg it” button, and the 
vote is immediately recorded (Figure P2-3). 


popularmectanics com— As ff smoke monsters and tropical polar beara weren't enough to keep cur 
heads spinning, Thursday's episode of Lost, “The Constant,” opened up a whole new can of 
digg tly worms: the fourth dimension. More... (Television) 


PN 


480 Are Lost's New Time-Travel Physics Junk Science? Maybe Not. ify 
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485 Are Lost's New Time-Travel Physics Junk Science? Maybe Not.. 
dogs Popularmectanics.com As if smoke monsters and tropical polar bears weren't enough to keep our 
heads spinning, Thursday's episode of Lost, “The Constant,” opened up a whole new can of 


dug} worms: the fourth dimension. More... (Television) 
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Figure P2-3. Digg now uses a “digg it” button to immediately record a “digg” within the same page 


Kevin Rose has noted that changing to a one-step process had a huge impact on the num- 
ber of stories being dug and thus on the success of his site. Here is his view on what 
transpired: 


There was a huge shift in activity on Digg when we made the move to the one-click 
digg in November 2005. Once we added Ajax, activity went through the roof on [the 
number of] diggs. It was just insane. Just the ease of the ‘one-click and you're done” 
made all the difference in the world. Once the users grasped that the content is syndi- 
cated to friends, friends’ activities then went through the roof. These small incremen- 
tal steps in feature additions drove the growth.” 


Did you get that? Changing to a one-click digg was not technically difficult. Yet it made 
a significant impact on Diggs success. It not only increased the ease of digging stories, 
but it also had an impact on other site activities. This is the power of making interactions 
lightweight. 


Next, in Chapter 4, we look at a set of patterns that can make our interactions lightweight: 


Contextual Tools 
Tools placed in context within the page content. 


* From Roses talk at the San Francisco Bay Area Chapter of ACM SIGCHI (BayCHI), April 11, 2006. See http:// 
www. baychi.org/calendar/2006041 1/. 
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Chapter 4 
Contextual Tools 


Interaction in Context 


Most desktop applications separate functionality from data. Menu bars, toolbars, and pal- 
ettes form islands of application functionality. Either the user chooses a tool to use on the 
data or makes a selection and then applies the tool. 


Early websites were just the opposite. They were completely content-oriented. Rich tool 
sets were not needed for simply viewing and linking to content pages. Even in e-commerce 
sites like Amazon or eBay, the most functionality needed was the hyperlink and “Submit” 
button. 


However, this simplistic approach no longer exists in the current web application land- 
scape. As the Web has matured, a wide variety of application styles has emerged. 


On one end of the spectrum there are simple sites that need no more functionality than 
the hyperlink and a “Submit” button. On the other end of the spectrum there are full ap- 
plications hosted as a website. Google Search and Yahoo! Mail are two typical applications 
that illustrate this variation (Figure 4-1). 


Google E 


Comge tnana | Ten Mamta Gaby -— 


Figure 4-1. Google Search needs only hyperlinks and a search button; Yahoo! Mail, on the other hand, 
is a full-featured application with toolbars and menus 
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Between these two opposites are a lot of sites that need to mix content and functionality. 
It is to this intersection that we turn our attention in this chapter. 


Think for a moment where user interfaces are headed. 


Touch-based interfaces were the stuff of research labs and, more recently, interesting You- 
Tube videos. But now they’re as close as our phones. Most notably, the Apple iPhone 
brought touch to the masses (Figure 4-2). Gesture-based interfaces seemed even further 
out. Yet these became reality with the Nintendo Wii. 


Figure 4-2. The Apple iPhone introduced touch-based interfaces to the consumer market 


With both gesture and touch-based interfaces, interaction happens directly with the 
content. 


Tip 
The content is the interface. Instead of being contained in separate areas of functionality, 
the actions feel close to the objects being interacted with. 


This concept also informs our current challenge. How do we bring tools nearer to the 
content to make the interaction as lightweight as possible? 


Fitts’s Law 


Fitts’s Law is an ergonomic principle that ties the size of a target and its contextual prox- 
imity to ease of use. Bruce Tognazzini restates it simply as: 


The time to acquire a target is a function of the distance to and size of the target. 


In other words, if a tool is close at hand and large enough to target, then we can improve 
the user’s interaction. Putting tools in context makes for lightweight interaction. 
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Contextual Tools 


We could simply isolate our functionality into islands of tools (toolbars and menus). But 
this would work against Fitts’s Law by requiring more effort from the user. It would also 
add more visual weight to the page. Instead of interacting with the functionality sepa- 
rately, we can bring the functionality into the content with Contextual Tools. 


Contextual Tools are the Web’s version of the desktop’s right-click menus. Instead of hav- 
ing to right-click to reveal a menu, we can reveal tools in context with the content. We can 
do this in a number of ways: 


Always- Visible Tools 
Place Contextual Tools directly in the content. 


Hover-Reveal Tools 
Show Contextual Tools on mouse hover. 


Toggle-Reveal Tools 
A master switch to toggle on/off Contextual Tools for the page. 


Multi-Level Tools 
Progressively reveal actions based on user interaction. 


Secondary Menus 
Show a secondary menu (usually by right-clicking on an object). 


Always-Visible Tools 


The simplest version of Contextual Tools is to use Always-Visible Tools. Digg is an ex- 
ample of making Contextual Tools always visible (Figure 4-3). 


agg Ten Sites for Finding Wond| Visible tool 


Swritowe Not only are thes A : 3 ; 
diyya cultural renaissance of bricolage or! Beside each story is a digg scorecard. Just below is the 


digg it Industry News “digg it” button. The digg button shows for all stories. 


Other actions are represented less prominently. 


388 Ten Sites for Finding Wond| Invitation 
towed Not only are thes 


pae emia’ renaissance of bricotage o) ON mouse hover, the digg button border changes to a 
digg it Industry News darker color and the text label changes to black. High- 
k lighting is an effective way to signal interactivity. 
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F ¢ “on Completion 
— — — Once the user clicks the “digg it” button, the vote is 
digg It counted. The current vote fades out and then the new 
& k k digg count (including your vote) appears instantly. The 


digg button changes to “dugg’ and is no longer clickable 
(indicated by the gray text). 


Figure 4-3. Diggs “digg it” button is a simple Contextual Tool that is always visible 


Considerations 
The “digg it” button and Digg scorecard provide Always- Visible Tools next to each story. 


Clear call to action 


Why not hide the tools and only reveal them when the mouse is over the story? Since 
digging stories is central to the business of Digg, always showing the tool provides a clear 
call to action. There are other actions associated with news stories (comments, share, bury, 
etc.) but they are represented less prominently. In the case of Digg, the designers chose to 
show these at all times. An alternate approach would be to hide them and show them on 
mouse hover (we will discuss this approach in the next section). 


It turns out that voting and rating systems are the most common places to make tools 
always visible. Netflix was the earliest to use a one-click rating system (Figure 4-4). 


Star Wars; Episode V; The Empire Strikes Back: Original 
Theatrical Version 

(1880) PG 

George Lucas’s epic saga confnues (in this original, unenhanced 
theatrical version) as Luke Skywalker (Mark Hamill) teams Ne ways of 
the Jedi from aging masier Yode to defeat the evil Empire. ... Read 
Morn 


EERERER 


Figure 4-4. Netflix star ratings are always visible 


Just as with Digg, rating movies is central to the health of Netflix. The Cinematch” rec- 
ommendation engine is driven largely by the user's ratings. So a clear call to action (to 
rate) is important. Not only do the stars serve as a strong call to action to rate movies, but 
they also provide important information for the other in-context tool: the “Add” button. 
Adding movies to your movie-shipping queue is key to having a good experience with the 
Netflix service. 
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Relative importance 


One way to clarify this process is to decide on the relative importance of each exposed 
action. Is the “digg it” action as important as the “bury it” action? In the case of Digg, the 
answer is no. The “digg it” action is represented as a button and placed prominently in the 
context of the story. The “bury it” action is represented as a hyperlink along with other 
“minor” actions just below the story. The contrast of a button and a hyperlink as well as its 
placement gives a strong indication as to the relative importance of each action. 


Tip 


If an action is critical, expose it directly in the interface. 


Discoverability 


Discoverability is a primary reason to choose Always-Visible Tools. On the flip side, it 
can lead to more visual clutter. In the case of Digg and Netflix, there is a good deal of vi- 
sual space given to each item (story, movie). But what happens when the items you want 
to act on are in a list or table? 


Generally Contextual Tools in a list work well when the number of actions is kept to a 
minimum. Gmail provides a single Always-Visible Tool in its list of messages—the star 
rating—for flagging emails (Figure 4-5). 


m gge F eBay 
[  dallystatus [  dalystatus 
V eBay V eBay 
Vv dailystatus Vr dailystatus 
FF mme F * mmie 


Figure 4-5. Google Mail uses Contextual tools to flag favorites 


Simply clicking the star flags the message as important. The unstarred state is rendered in 
a visually light manner, which minimizes the visual noise in the list. 


The following list, from Google Reader, takes a different approach. It shows several tools 
for managing subscriptions: rename, delete, and change folders for each subscription in 
the list. This is convenient but is definitely heavier visually (Figure 4-6). 
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Proference: 


Select: All 13 subscriptions, None, Unassigned |More actions... =| Unsubscribe ews 


For by rama, tag. or URI 


IT An Event Apart News Rename E | Change folders X 
http://anaventapart.cam/index.xmi E Can Ship 
[~ Boing Boing Rename ® | Change folders X 
hittp://feeds. boingboing. net/boingboing/iBag News 
[7 CNN.com Rename 1 | Change folders... hd 
hitp://rss.enn.com/rssåonn topstories.rss News 
| [~ Dally Kos Rename T | Change folders... v 


hittp://feeds.dailykos.com/dailykos/index xml News 


Figure 4-6. Google Reader’s Manage Subscriptions page displays lots of actions for each subscription, 
leading to a visually heavier display 


Sometimes concerns over visual noise must take a back seat to discoverability. The Yahoo! 
India Our City team struggled with a design early on. They wanted to hide the “email this” 
icon and only show it on hover. However, since the site was specifically for India, they 
were concerned with how much exposure the population had with simple web interac- 
tions like mouse rollover. So instead of hiding the icon, they chose to show it for every 
story (Figure 4-7). 


Travel Questions 
any openings for GIS in Bangalore or Hyderabad? 
Naked by -ar Mar 1S 215 AM-1ta E 
are there any buses from tivandrum to bangakee via kuppam 
i by -kumar k v Mar 1! D D 

am woking for a happening event for the evening in Bangalore. any help avatibie? 

ked by -Meghna N Mar 14 4:54 AM E 
whal are fre new consiracóon taking place in Whilefeld Bangakee and near about ihis place 7? 
Asked t Rat Mar 12 1051 PM - 2 ‘ Cc 
hame stays in conrg? 


Figure 4-7. Yahoo! India Our City was designed for users who were not familiar with mouse rollover; 
the email icon is shown at all times 


Best Practices for Always-Visible Tools 


Here are some best practices to keep in mind: 


- Make your Contextual Tools always visible if it is important to make a prominent call to 
action. 

+ Keep visual clutter to a minimum. 

+ Keep the number of visual items to a minimum. 
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Hover-Reveal Tools 


Instead of making Contextual Tools always visible, we can show them on demand. One 
way to do this is to reveal the tools when the user pauses the mouse over an object. The 
Hover-Reveal Tools pattern is most clearly illustrated by 37 Signal’s Backpackit (Figure 
4-8). To-do items may be deleted or edited directly in the interface. The tools to accom- 
plish this are revealed on mouse hover. 


Pick Up at the Store Normal state 
[ Milk 
I" Orange Juice 
FT Tomatoes 
[~ Lettuce 
[ Bread 


The edit and delete tools are hidden in the normal state. 


Pick Up at the Store Invitation 
fey. TT Milk 
I" Orange juice 
M Tomatoes 
[ Lettuce 
” Bread 


On mouse hover, the tools are revealed. The tools are “cut” into 
the gray bar, drawing the eye to the change. 


Figure 4-8. Backpackit reveals its additional tools on mouse hover 


Considerations 


The gray bar on the left is a nice visual reinforcement for the interaction. By allowing the 
tools to “cut” into the sidebar, the designers draw your eye to the available tools. The light 
yellow background draws attention to the to-do item being acted on. These two simple 
treatments make it clear which line has the focus and that additional tools have been 
revealed. 


Tip 


To reduce visual clutter, hide non-primary actions until they are needed. 


Visual noise 


Showing the items on hover decreases the visual noise in the interface. Imagine if instead 
the delete and edit actions were always shown for all to-do items. Figure 4-9 shows just 
how visually noisy that approach would have been. 
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Figure 4-9. What the Backpackit interface would have looked like if the Contextual Tools were always 
visible 


Yahoo! Buzz reveals its tools on mouse hover for both its Top Searches (Figure 4-10) and 
Top Stories (Figure 4-11). 

For Top Searches, it is important to keep the top-ten list as simple as possible. Showing 
tools would compete with the list itself. Since the actions “Search Results” and “Top Ar- 
ticles” (Figure 4-10, right) are less important, they are revealed on hover. The actions may 
be important, but making the content clear and readable is a higher priority. 
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8 Boy George 

9 Obama 

10 Iran 


2 Boyd Coddington 2 Baya Coddington 

3 Mcskillet Burrito 3 Mcskillet Burrito Searcn Aesuks | Tap Articies 
4 Prince Harry 4 Prince Harry N 

5 Leap Day 5 Leap Day 


Figure 4-10. Yahoo! Buzz reveals additional tools for the top searches when the user hovers over each 


item 


Similarly, for Top Stories, Yahoo! Buzz shows only “Share”, 
on hover. “Buzz Up” is shown at all times, but gets extra visual treatment on mouse hover 
(Figure 4-11, right). "Buzz Up” is important enough to show at all times, but can be toned 


down when not the focus. 


D cc 
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Hover-Reveal Tools 87 
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Figure 4-11. Yahoo! Buzz highlights the row and brings in additional tools 


Discoverability 

A serious design consideration for Hover-Reveal Tools is just how discoverable the ad- 
ditional functionality will be. In the earlier Backpackit example (Figure 4-8), while the 
Contextual Tools are revealed on hover, the checkbox is always visible for each to-do 
item. To check off an item, users have to move the mouse over it. When they do, they will 
discover the additional functionality. 


Flickr provides a set of tools for contacts. To avoid clutter, contact profile photos are 
shown without any tool adornment. When the mouse hovers over the contact’s photo, a 
drop-down arrow is revealed (Figure 4-12). Clicking reveals a menu with a set of actions 
for the contact. This works because users often know to click on an image to get more 
information. Being drawn to the content is a good way to get the user to move the mouse 
over the area and discover the additional functionality. 


a all 


Figure 4-12. Flickr reveals the drop-down menu on hover 


Tip 
Help users understand revealed tools by using familiar idioms (such as hyperlinks for 
actions or drop-down arrows to expose additional functionality). 


Yahoo! Mails flagging feature is revealed when the user hovers over the flagged column 
on a mail message (Figure 4-13). Contrast this to Google’s always-revealed star approach 
we discussed earlier (Figure 4-5). 
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Figure 4-13. Yahoo! Mail reveals the flag button when the user's mouse hovers over the flag column of 
a message 


The Yahoo! approach is visually cleaner, but less discoverable. We will have more to say 
about making tools discoverable in Chapter 10 when we discuss Dynamic Invitations. 


Contextual Tools in an overlay 


Sometimes there are several actions available for a focused object. Instead of placing tools 
beside the object being acted on, the revealed tools can be placed in an overlay. However, 
there can be issues with showing contextual tools in an overlay: 


1. Providing an overlay feels heavier. An overlay creates a slight contextual switch for 
the user's attention. 


2. The overlay will usually cover other information—information that often provides 
context for the tools being offered. 


3. Most implementations shift the content slightly between the normal view and the 
overlay view, causing the users to take a moment to adjust to the change. 


4. The overlay may get in the way of navigation. Because an overlay hides at least part 
of the next item, it becomes harder to move the mouse through the content without 
stepping into a “landmine.” 


Anti-pattern: Hover and Cover 


Figure 4-14 illustrates all four of these situations. In an early version of Yahoo! for 
Teachers, hovering over a clipped item brought in three tools: copy, delete, and preview. 
However, when these tools were placed in an overlay, it covered the item to the right, mak- 
ing it hard to see that content and even navigate to it. In addition, since the overlay had 
some additional padding (as well as rounded corners), the image shown in the overlay 
was about two pixels off from the non-overlay version. This slight jiggle was distracting. 
To add insult to injury, the overlay was sluggish to bring into view. 


* Yahoo! for Teachers was only released in beta and never widely publicized. It was recently closed down, and 
another company (edtuit.com) will be launching a similar site. 
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Figure 4-14. An early version of the Yahoo! for Teachers beta revealed Contextual Tools in an overlay; 
the overlay covered more than half of the item to its right 


The final straw was if users wanted to delete several items, they would hover over the 
image, wait for the overlay, click Delete, then be forced to move out and back in again to 
activate the next image’s Contextual Tools (Figure 4-15). Hover and Cover is a common 
anti-pattern that occurs when exposing an overlay on hover and hiding important context 
or further navigation. 


tithe stuff that runs long 


Figure 4-15. Navigating required a zigzag approach to get around the tool overlay 


Hover and Cover was resolved by no longer using an overlay. Instead, additional margin 
space was added to each image, and the Contextual Tools were hidden. On mouse hover, 
the tools were simply revealed, along with a border defining the image being acted on 
(Figure 4-16). 
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Mpoesuc aton. yah PRONO BON. yah 


aor Lae] 


Figure 4-16. In the redesigned version, tools were shown on hover directly surrounding the image 
instead of in an overlay 


The difference (Figure 4-14 versus Figure 4-16) is dramatic. Not only is the experience 
improved, but overall page performance is improved as well. On mouse hover, the image 
no longer shifts in a distracting manner. In redesign, the delete always shows up in the 
same place relative to the image; this means the user “remembers spatially” where the 
command is, making it easier to target (Figure 4-17). 
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Figure 4-17. Since the Delete action appears in the same spot relative to the image, the user can easily 
anticipate where the action will appear 


Tip 
Be careful when using overlays to expose additional information or tools. The overlay 
can get in the way of normal navigation or hide important information. 


Anti-pattern: Mystery Meat 


Have you ever found a can in the back of the pantry whose label has long since fallen off? 
The only way to identify this mystery meat is to open it. Unidentifiable icons are pretty 
much the same as a row of unlabeled cans. You have to hover over each icon and hope for 
a tool tip to label it. Even worse is when no tool tip is available. The easiest way to avoid 
this predicament is to use either a text label or combine an icon with a text label. Mystery 
Meat is a common anti-pattern that occurs when you have to hover over an item to un- 
derstand how to use it. 


Tip 


Don't make users hover over your tools in order to figure out what they mean. 


Figure 4-18 illustrates this in an early version of Zooomr. The only recourse for the user 
was to pause over each icon and wait a second or so to read a tool tip about the purpose 
of the icon. This does not create a lightweight interaction! 


Figure 4-18. A very early version of Zooomr revealed a number of unidentifiable icons when the mouse 
hovered over a photo 
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Activation 


Tool overlays should activate immediately. The tools are an extension of the interface, and 
any delay creates too much of a delay between the activation and invocation of the action. 
In Chapter 5, we will discuss Dialog Overlays. In that discussion we suggest a delay be- 
fore showing informational overlays. Why the difference? Since information may not be 
needed to understand the object, and given the fact that activation might be accidental, 
it is best to place a small delay when showing the additional information (usually a half- 
second delay is sufficient). But actions are different. Following the suggestions just men- 
tioned (avoid Hover and Cover anti-pattern), the actions can be revealed without a lot of 
disruption. And if they show immediately, the user can access the additional commands 
almost as quickly as with Always-Visible Tools. 


Best Practices for Hover-Reveal Tools 


Here are some best practices to keep in mind: 
Hide Contextual Tools behind a mouse hover if the actions are secondary and you want 
to make the content more important (or other visible commands more important). 
Avoid using overlays when revealing additional tools. They will lead to the Hover and 
Cover anti-pattern, as well as require the user to perform mouse gymnastics to accom- 
plish the most basic tasks. 
When additional tools are revealed, make sure that all parts of the page remain stable. 
Avoid any element shifting by a few pixels or page elements moving around. These cause 
the user to be directed away from what is really happening. 
Make sure revealed icons are clear and understandable. When possible, just use text 
labels. 


Activate tool overlays instantly. Unlike informational overlays, the user needs the addi- 
tional tools to be available for immediate interaction. 


Toggle-Reveal Tools 


A variation on the two previous approaches is to not show any Contextual Tools until a 
special mode is set on the page. A good example of Toggle-Reveal Tools is in Basecamp’s 
category editing, which we discussed in Chapter 1 (Figure 4-19). 
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h ke it Direct link at the top is the way to edit the category 

Documents section. 

draft 

ORA Stuff 

Pictures 

Sounds 

Categories oo Visible in edit mode 

Each category gets a “Rename” link and where 

Ch 1: Make it Direct =e appropriate a trashcan is displayed (for empty 

—= Cre categories that may be deleted). 

draft Rename This is a“soft” mode, since the user can ignore the 

OBA Stuff AEEA additional tools and choose to do something dif- 

& ferent on the page. 

Pictures Rename È 

Sounds Rename 

Add another category 


Figure 4-19. Basecamp reveals category-editing tools only when the edit mode is turned on for the area 


Considerations 


Here are a few considerations to keep in mind when using Toggle-Reveal Tools. 


Soft mode 


Generally, it is a good thing to avoid specific modes in an interface. However, if a mode is 
soft it is usually acceptable. By “soft” we mean the user is not trapped in the mode. With 
Basecamp, the user can choose to ignore the tools turned on. It just adds visual noise and 
does not restrict the user from doing other actions. This is a nice way to keep the interac- 
tion lightweight. 


Tip 
Interfaces should strive to be modeless. Often, though, a “soft mode” can be employed 
to provide context for an action that is easy to activate and easy to remove. 
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When would you use this technique? When the actions are not the main thing and you 
want to reduce visual noise. This fits the category example perfectly. Items are renamed or 
deleted occasionally. It is common, however, to want to click through and see the contents 
of a category (the category is always hyperlinked). Hence, make it readable and easily nav- 
igable in the normal case—but still give the user a way to manage the items in context. 


Google Reader could potentially be improved in this manner. In the current interface, 
clicking "Manage Subscriptions” takes the user to another page to edit subscriptions. One 
possible change is the addition of an “edit” button that toggles in a set of context tools for 
each subscription (Figure 4-20). This would allow the user to rename and unsubscribe 
without leaving the context of the reading pane. 
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W Unmaichod Style | Nows W Unmaiched Stylo | Nows 

E Upcomin 0 6) min 

iD Yahoo! News Sandbox X ED Yahoo! News Sandbox 

Manage Hubeonpiung a j 


Figure 4-20. Adding an “edit” link to Google Reader’ feed list and toggling in common actions could 
potentially make it easier to manage subscriptions 


Best Practices for Toggle-Reveal Tools 


Here are some best practices to keep in mind: 
Toggle a tool mode for an area or page when the actions are not the main flow, but you 
want to provide the most direct way to act on these objects when the need arises. 
Make the activation and deactivation of the edit mode as symmetrical as possible. 


Keep the transition between display and edit as seamless as possible to provide a “soft 
mode’ for editing. 


Multi-Level Tools 


Contextual Tools can be revealed progressively with Multi-Level Tools. Songza’ provides 
a set of tools that get revealed after a user clicks on a song. Additional tools are revealed 
when hovering over the newly visible tools (Figure 4-21). 


* Aza Raskin is the designer of Songza, founder of Humanized. He is the son of the late human-computer inter- 
face expert Jef Raskin. 
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Normal state 


The tools are not visible normally. 
Mouse hover just highlights the 
song—it does not reveal the Con- 
textual Tools. 


Click activation 


On mouse click, a cloverleaf-style 
menu is shown with the four basic 
functions: play, rate, add, and share. 


Hover expose 


Second-level actions are exposed 
while hovering over share or rate. 


Figure 4-21. Songza uses a multi-level contextual tool menu 


Considerations 


Songza reveals the four options “play”, “rate”, “share”, and “add to playlist” after the user 
clicks on a song title. Hovering over “share” or “rate” reveals a secondary set of menu items 
(Figure 14-21, center). 
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Radial menus 


Radial menus’ such as in Songza have been shown to have some advantages over more 
traditional menus. First, experienced users can rely on muscle memory rather than hav- 
ing to look directly at the menu items. Second, the proximity and targeting size make the 
menu easy to navigate since the revealed menu items are all equally close at hand (recall 
Fitts’s Law). 


The one potential downside to this approach is that rating a song requires several steps: an 
initial click on the song, moving the mouse over the “rate” menu item, then clicking either 
the thumbs up or thumbs down option. If rating songs was an important activity, the extra 
effort might prevent some users from doing so. An alternate approach would be to replace 
“rate” directly with the thumbs up and the thumbs down options. 


Activation 


Another interesting decision Songza made was to not activate the radial menu on hover. 
Instead, the user must click on a song to reveal the menu. Activating on click makes the 
user intent more explicit. 


Making activation more explicit avoids the issues described earlier in the Hover and Cov- 
er anti-pattern. The user has chosen to interact with the song. Conversely, with a mouse 
hover, it’s never quite clear if the user meant to activate the menu or just happened to 
pause over a song title. 


Default action 


However, this does mean there is no way to start a song playing with just a simple click. 
Playing a song requires moving to the top leaf. One possible solution would be to place the 
“play” option in the middle of the menu (at the stem) instead of in one of the leaves. Click- 
ing once would activate the menu. Clicking a second time (without moving the mouse) 
would start playing the song. This interaction is very similar to one commonly used in 
desktop applications: allowing a double-click to activate the first item (default action) in 
a right-click menu. 


Tip 


Keep the most common actions as near to the activation point as possible. 


* Also known as pie menus. See Jack Callahan et al. (1988), “An empirical comparison of pie vs. linear menus.” 
Proceedings of ACM CHI Conference on Human Factors in Computing Systems: 95-100. 
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Contextual toolbar 


Picnik is an online photo-editing tool that integrates with services like Flickr. In all, there are 
six sets of tools, each with a wide range of palette choices. Picnik uses Multiple-Level Tools 
to expose additional functionality. By wrapping the photo with tools in context and progres- 
sively revealing the levels of each tool, Picnik makes editing straightforward (Figure 4-22). 


Figure 4-22. Picnik wraps layers of Contextual Tools around the image being edited 


Muttons 


Another variation on Multi-Level Tools is the “mutton” (menu + button = mutton). Mut- 
tons are useful when there are multiple actions and we want one of the actions to be the 
default. Yahoo! Mail uses a mutton for its “Reply” button (Figure 4-23). 
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Normal state 


Yahoo! Mail displays the “Reply” mutton in its toolbar as a button 
with a drop-down arrow control. 


As a button 


On mouse hover, the button gets a 3D treatment and color high- 
light. The drop-down arrow gets the same treatment to call out its 
functionality. 


Clicking the “Reply” button at this point will trigger a reply without 
activating the menu. 


As a menu 


Clicking on the drop-down arrow reveals two commands: “Reply 
to Sender" is the same as the default “Reply” button action; “Reply 
to All’ is an additional action that was hidden until the menu was 
revealed. 


Figure 4-23. Yahoo! Mail’s “Reply” button looks like a drop-down when hovered over; clicking “Reply” 
replies to sender, and clicking the drop-down offers the default action as well as “Reply to All” 


Download at WoweBook.Com 


Multi-Level Tools 97 


Clicking "Reply” performs the individual reply. To reply to all, the menu has to be acti- 
vated by clicking on the drop-down arrow to show the menu. 


Muttons are used to: 
e Provide a default button action (“Reply to Sender”) 
e Provide a clue that there are additional actions 
e Provide additional actions in the drop-down 


If muttons are not implemented correctly, they can be problematic for those using acces- 
sibility technologies. Because an earlier version of Yahoo! Mail did not make the mutton 
keyboard accessible, Yahoo!’s accessibility guru, Victor Tsaran, was convinced that there 
was no “Reply to All” command in the Yahoo! Mail interface. Only after the mutton was 
made more accessible could he find the “Reply” command. 


Anti-pattern: Tiny Targets 


At the beginning of this chapter, we discussed Fitts’s Law. Recall that the time it takes to 
acquire a target is a function of both distance and size. Even if tools are placed close by in 
context, don't forget to make them large enough to target. 


Both Flickr and Yahoo! Mail provide a reasonable-size target for the drop-down arrow. 
Compare this with the expand/collapse arrow used in an early version of Yahoo! for 
Teachers (Figure 4-24). 
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Figure 4-24. The Yahoo! for Teachers Profile Card info is hidden unnecessarily 


Tip 


Never use small targets. Make targets large enough to notice and interact with. 


The arrow is tiny (8x8 pixels). It is exposed only on hover. Providing Tiny Targets makes 
interaction much more difficult. An alternate approach would be to always show a “more 
info” link. Clicking it could toggle the additional profile information. Alternatively, pro- 
viding a larger target for the arrow would improve its findability and targeting. 
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Best Practices for Multi-Level Tools 


Here are some best practices to keep in mind: 

Use Multi-Level Tools when you want to avoid revealing Contextual Tools on a mouse 
hover. 

Use Multi-Level Tools to make activation explicit. 

Use muttons when you have a default action that the user normally takes but alternate 
actions are still fairly frequent. 

Avoid cascades where possible. Users have a hard time maneuvering the various mouse 
urns that are required to get to these secondary menus. 

Keep actions as close to the activation point as possible. 


Secondary Menu 


Desktop applications have provided Contextual Tools for a long time in the form of Sec- 
ondary Menus. These menus have been rare on the Web. Google Maps uses a secondary 
menu that is activated by a right-click on a route. It shows additional route commands 
(Figure 4-25). 


Normal view of route 


Routes give no indication of additional function- 
ality when not hovered over. 
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Invitation 


When the mouse is over the route, potential 
stops are marked with a white circle. 


Menu 


Right-clicking on the item exposes four com- 
mands that act on the point selected: "Add a 
destination’, “Zoom in’, “Zoom out”, and “Center 
map here” 


2o 
Zoohwout 


Center map here 


Figure 4-25. Google Maps uses a right-click menu to add new route stops or to adjust the map around 
the current point on the route 


Considerations 


Secondary Menus have not been common in web applications. 


Conflict with browser menu 


One problem is the browser inserts its own right-click menu. Replacing the menu in nor- 
mal content areas can confuse users, as they may not know if the standard browser menu 
or the application-specific menu will be shown. It will depend on whether it is clear that 
an object exists in the interface (as in the route line above), and if the menu is styled dif- 
ferently enough to disambiguate the menus. 
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Discoverability 


As a general rule, never put anything in the Secondary Menu that cant be accomplished 
elsewhere. Secondary Menus are generally less discoverable. More advanced items or 
shortcuts, however, can be placed in the Secondary Menu as an alternate way to accom- 
plish the same task. 


Accessibility 


Right-click is not the only way to activate a Secondary Menu. You can activate the menu 
by holding down the mouse for about one second. This provides a more accessible ap- 
proach to popping up a Secondary Menu. This technique is used in the Macintosh Dock. 
Clicking and holding down on an application in the dock will reveal the Secondary Menu 
without requiring a right-click activation. 


Acting on multiple objects 


Keep in mind that all of the other Contextual Tools presented in this chapter have a limi- 
tation on the number of items they can operate on. Always-Visible Tools, Hover-Reveal 
Tools, Toggle-Reveal Tools, and Multi-Level Tools all operate on a single item at a time 
(even Toggle-Reveal Tools just shows a tool per item). Secondary Menus are different. 
They can be combined with a selection model (as described in Chapter 3) to perform ac- 
tions on selected set of items. 


Best Practices for Secondary Menus 


Here are some best practices to keep in mind: 
Place alternate or shortcut commands in Secondary Menus. 


Consider activating Secondary Menus by holding down the mouse for one second as an 
alternative to right-clicking to show the menu. 


Style Secondary Menus differently than the Browser’s standard secondary menu. 

Avoid Secondary Menus for all but redundant commands 

Avoid Secondary Menus in places where there is little resemblance to a traditional web 
page. 

Use Secondary Menus for operating on a selected set of objects. 
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General Practices for Contextual Tools 


To sum up, here are some overall best practices to keep in mind: 


- Contextual Tools are useful for reducing the user's path to completing a task. By placing 
ools near the point of focus and making these tools easy to activate, you can create a 
ightweight interaction. 
- Use Contextual Tools when you have no way to select elements and operate on them 
as a whole. 
- Use Contextual Tools when you want to shorten the path the user must take to com- 
plete a task for an item shown on the page. 
+ Use Contextual Tools when you want to provide a clear call to action at the point of 
focus. 
+ Always make your actions as immediate as possible, avoiding additional steps where you 
can. 
+ Where possible use familiar techniques (hyperlinks, drop-down arrows, buttons) when 
providing actions in unexpected places (hover-revealed Contextual Tools). 


. ake the actions clear and direct. Avoid using icons for all but the most obvious (an [x] o 
a trashcan for delete, for instance). 


+ Use buttons for strong calls to action and links for minor actions. 
+ Make sure that targets used to open menus or expand information are suitably sized. 
ever use 8x8 pixel targets. 

+ Make tools easy to understand, easy to target, and quick to execute. This will make them 
feel lightweight. 
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Principle Three 


Stay on the Page 


Flow 


In the book, Flow: The Psychology of Optimal Experience, published by Harper Perennial, 
Mihaly Csikszentmihalyi describes the state of "optimal experience” as the times when 
people enter a state of concentration so focused it creates a state of effortless control. Athletes 
may enter into flow and report the feeling of unself-consciousness as well as rising to the 
peak of their abilities. Flow, however, can be broken by a sudden awareness of the sur- 
roundings or by some interruption that happens to come along. 


Unfortunately, users of our web applications rarely experience this level of happiness. In 
fact, the traditional web experience is punctuated with a page refresh each time the user 
chooses an action. It's like watching a play where the curtain comes down between each 
line of dialogue. The page refresh creates an artificial break in the action—or a break in 
the user's flow. 


Change Blindness 


The break can cause visual consequences as well. I recently took some of my children to 
the Exploratorium in San Francisco (a wonderful hands-on science museum for all ages). 
An exhibit that caught my eye was the one demonstrating change blindness.” A large screen 
displayed an image of a store-front typical of those seen in most urban areas, complete 
with awning, windows, doors—all of a distinctive style. Then suddenly a new updated im- 
age of the store-front replaced the original one. The new image had a slight change from 
the original. However, try as I might I could not detect the change. Why? The transition 
was punctuated by a very brief (less than a fourth of a second) delay. Showing the origi- 
nal image, going blank, then showing the second image made it really hard to detect the 
change between the two. 


Wikipedia describes change blindness as: 


In visual perception, change blindness is the phenomenon where a person viewing a 
visual scene apparently fails to detect large changes in the scene. 


* You can see a demonstration of this at http://www.usd.edu/psyc301/ChangeBlindness.htm. 
+ See http://en.wikipedia.org/wiki/Change_blindness. 
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Fortunately the exhibit included a button to press that removed the "page refresh” When 
I held down this button, the change was obvious. 


Including the page refresh in web applications was not the desire of web designers but 
rather an artifact of the technology underlying the Web. Each action generated a request 
for a new page, which included the refresh break. With this limitation, the ability to pro- 
vide a seamless flow-based experience with continuous visual perception to the user was 
almost impossible. 


However, this is no longer the case. We now have a button we can hold down! With the 
rise of Ajax, Flash, and other new technologies, it is possible to perform actions and bring 
back results for those actions while remaining on the same page and disturbing none of 
the surrounding context. 


The principle Stay on the Page gets at the idea of creating a continuous visual perception 
that enhances flow nirvana. Given the history of the Web, it is important to always ask 
ourselves, "Can we create this experience in context, within the current page?” Some- 
times, though, we may answer these questions with a “No” That can be OK. It is impor- 
tant to realize that there are times when switching the page makes more sense than staying 
within the page. We will explore these situations in the next few chapters. 


In Chapters 5 through 8, we look at four ways to keep the user on the page: 


Overlays 
Instead of going to a new page, a mini-page can be displayed in a lightweight layer 
over the page. 


Inlays 
Instead of going to a new page, information or actions can be inlaid within the page. 


Virtual Pages 
By revealing dynamic content and using animation, we can extend the virtual space 
of the page. 


Process Flow 
Instead of moving from page to page, sometimes we can create a flow within a page 
itself. 
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Chapter 5 
Overlays 


Overlays are really just lightweight pop ups. We use the term lightweight to make a clear 
distinction between it and the normal idea of a browser pop up. Browser pop ups are cre- 
ated as a new browser window (Figure 5-1). Lightweight overlays are shown within the 
browser page as an overlay (Figure 5-2). Older style browser pop ups are undesirable 
because: 


e Browser pop ups display a new browser window. As a result these windows often take 
time and a sizeable chunk of system resources to create. 


e Browser pop ups often display browser interface controls (e.g., a URL bar). Due to 
security concerns, in Internet Explorer 7 the URL bar is a permanent fixture on any 
browser pop-up window. 
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Figure 5-1. If Orbitz used a browser pop-up window for its calendar chooser (it does not), this is how it 
might look 


By using either Flash or Ajax-style techniques (Dynamic HTML), a web application 


can present a pop up in a lightweight overlay within the page itself. This has distinct 
advantages: 
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e Lightweight overlays are just a lightweight in-page object. They are inexpensive to 
create and fast to display. 


e The interface for lightweight overlays is controlled by the web application and not 
the browser. 


+ There is complete control over the visual style for the overlay. This allows the overlay 
to be more visually integrated into the application’s interface (compare Figures 5-1 
and 5-2). 
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Figure 5-2. Orbitz uses a lightweight DHTML overlay for its calendar chooser; since it does not require 
the overhead of a separate browser window, it can pop up quickly and is better integrated into the page 
visually 


Lightweight overlays can be used for asking questions, obtaining input, introducing fea- 
tures, indicating progress, giving instructions, or revealing information. They can be ac- 
tivated directly by user events (e.g., clicking on an action, hovering over objects) or be 
provided by the web application at various stages in the completion of an action. 


Tip 
Never use browser overlays. They are expensive to create, hard to control, slower than 
lightweight overlays, and visually unappealing. 


We will look at three specific types of overlays: Dialog Overlays, Detail Overlays, and 
Input Overlays. 
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Dialog Overlay 


Dialog Overlays replace the old style browser pop ups. Netflix provides a clear example 
of a very simple Dialog Overlay. In the “previously viewed movies for sale” section, a user 
can click on a “Buy” button to purchase a DVD. Since the customer purchasing the DVD 
is a member of Netflix, all the pertinent shipping and purchasing information is already 
on record. The complete checkout experience can be provided in a single overlay (Figure 
5-3). 


Activation 


Clicking the “Buy” button initiates the 
purchase process. 


Overlay treatment 


The confirmation dialog is shown in a 
lightweight overlay. Since the overlay 
is modal (interaction is only accepted 
in the overlay) the rest of the page is 
dimmed down. The user may also can- 
cel the purchase. 


Figure 5-3. Netflix uses a lightweight pop up to confirm a previously viewed DVD purchase; in 
addition, it uses the Lightbox Effect to indicate modality 


Considerations 


Because the overlay is a lightweight pop up, the confirmation can be displayed more rap- 
idly and the application has complete control over its look and placement. 


Lightbox Effect 


One technique employed here is the use of a Lightbox Effect. In photography a lightbox 
provides a backlit area to view slides. On the Web, this technique has come to mean bring- 
ing something into view by making it brighter than the background. In practice, this is 
done by dimming down the background. 


You can see the Lightbox Effect pattern used by Flickr when rotating images (Figure 5-4). 
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Figure 5-4. Flickr also uses a Lightbox Effect to focus attention on the overlay 


The Lightbox Effect is useful when the Dialog Overlay contains important information 
that the user should not ignore. Both the Netflix Purchase dialog and the Flickr Rotate 
dialog are good candidates for the Lightbox Effect. If the overlay contains optional infor- 
mation, then the Lightbox Effect is overkill and should not be used. 


Modality 


Overlays can be modal’ or non-modal. A modal overlay requires the user to interact with 
it before she can return to the application. In both the Netflix example (Figure 5-3) and 
the Flickr example (Figure 5-4), the overlays are modal: users cannot interact with the 
main Netflix or Flickr page until they perform the action or cancel the overlay. In both 
cases, modality is reinforced with the Lightbox Effect. Dimming down the background 
cues the user that this portion of the interface cannot be interacted with. 


Sometimes overlays are non-modal. An example of this can be found in the Netflix site. 
When a DVD is added to the user’s shipping list (queue), a confirmation overlay is shown 
(Figure 5-5). While it may appear that the only way to dismiss the overlay is by clicking the 
“Close” box in the upper-right corner, in reality the user can click anywhere outside the 
overlay (in the dimmed area) and the overlay will dismiss. In this case the Lightbox Effect is 
used to focus the user’s attention on the confirmation and recommendations available. 


* For a discussion on modality, see Jef Raskin’s “The Humane Interface” (2000), 100, 141. 
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Figure 5-5. Netflix uses a non-modal overlay with the Lightbox Effect to focus attention on the 
confirmation and recommendation 


The Lightbox Effect emphasizes that we are in a separate mode. As a consequence, it is 
not needed for most non-modal overlays. As an example, refer back to Figure 5-2, the 
Orbitz calendar pop up. Since the overlay is really more like an in-page widget, it would 
not be appropriate to make the chooser feel heavier by using a Lightbox Effect. 


Tip 
Use the Lightbox Effect to emphasize modality or call attention to special information 
in an overlay. 


Staying in the flow 


Overlays are a good way to avoid sending a user to a new page. This allows the user to 
stay within the context of the original page. However, since overlays are quick to display 
and inexpensive to produce, sometimes they can be tempting to use too freely, and in the 
process, may actually break the user’s flow. 


Anti-pattern: Idiot Boxes 


Alan Cooper states a simple principle: 


Don't stop the proceedings with idiocy. 


* Cooper, Alan and Robert Reimann. About Face 2.0: The Essentials of Interaction Design (Wiley, 1995), 178. 
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In the context of flow he describes how egregious it is to interrupt the user needlessly: 


One form of excise is so prevalent that it deserves special attention.… Flow is a natural 
state, and people will enter it without much prodding. It takes some effort to break 
into flow after someone has achieved it. Interruptions like a ringing telephone will do 
it, as will an error message box. Some interruptions are unavoidable, but most others 
are easily dispensable... .. Interrupting a user's flow for no good reason is stopping the 
proceedings with idiocy and is one of the most disruptive forms of excise.” 


This is a clear anti-pattern that should be avoided. We call these types of overlays Idiot 


Boxes. 


One of the clearest examples of Idiot Boxes is the way certain confirmation overlays 
were used in Yahoo! Photos. When users selected a set of photos and dragged and then 
dropped them onto an album, they were treated with not just one confirmation, but with 


two (Figure 5-6). 
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drag and drop. 
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back that it is a valid drop target. 


* Cooper, Alan et al. About Face 3: The Essentials of Interaction Design (Wiley, 2007), 228. 
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Add Photos overlay 


| Add 3 photos to x | 
men A confirmation overlay is posted that 
asks the users if they really want to 
drop the photos onto the album. 
| le j Cancel 
A Add Complete Add Complete overlay 


3 photos added to ParisO6 P x 
Stating the obvious, the overlay re- 


"oR peats what just happened. Yes, the 
photos were added. 


Album after drop 


EO My Albums 
Wy Panis06 


Notice that there is no difference be- 
tween the album before or after the 
drop. 


Figure 5-6. Yahoo! Photos uses unnecessary overlay pop ups to communicate what happens when the 
user drops photos into an album 


A fundamental problem in this interaction is the lack of clear invitations and feedback at 
just the right moment. Lacking feedback when the user drags over the album (to signal 
you will be dropping it on the “Paris06” album) and after it has been dropped is often 
“remedied” by the heavy-handed use of pop-up overlays to state the obvious. We will 
discuss these concepts in more detail in later chapters. 


Tip 
Mind the interesting moments in an interaction. They can remove the need for Idiot 
Boxes. 


Using JavaScript alerts 


It is tempting to use the alert mechanism built into the browser for some confirmations. 
The problem with using this type of alerts is two-fold. 


First, they do not present themselves consistently across different operating systems. Un- 
der Microsoft Windows they will appear centered in the browser window, but with the 
Macintosh they will slide out from under the title bar. Depending on where the action 
takes place, users may have to move their mouse a lot further each time they need to dis- 
miss the alert (Figure 5-7). 
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Second, there is no way to control the look and feel of the alert pop up. With lightweight 
overlays, any valid web interface can be created to interact with the user. 
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Figure 5-7. In an older version of Google Reader, the JavaScript alert box displays differently on a 
Microsoft Windows PC versus a Macintosh 


The alert shown in Figure 5-7 has recently been replaced with a lightweight overlay (Fig- 
ure 5-2). 


Best Practices for Dialog Overlay 


Here are some best practices to keep in mind: 


Always use Dialog Overlays instead of browser pop ups. 


Use the Lightbox Effect when the overlay contains important information, if the user 
should not ignore it, or if the interaction with the dialog should be modal. 


Avoid unnecessary Dialog Overlays (Idiot Boxes), as they interrupt the user's flow. 
Don't use an overlay when a simpler, in-page interaction would suffice (see discussion in 
the next chapter on Inlays). 


Avoid JavaScript alert boxes, as they don't provide a consistent user experience between 
operating systems. 


Detail Overlay 


The second type of overlay is somewhat new to web applications. The Detail Overlay al- 
lows an overlay to present additional information when the user clicks or hovers over a 
link or section of content. Toolkits now make it easier to create overlays across different 
browsers and to request additional information from the server without refreshing the 
page. 


Taking another example from Netflix, information about a specific movie is displayed as 
the user hovers over the movie's box shot (Figure 5-8). 
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Box shots 


In the more recent versions of the Netflix site, large box 
shots are employed without synopsis text. Box shots convey 
a lot of information. 


Detail overlay activation 


However, often more information is needed to decide 
whether a movie should be played or added to a movie 
queue. 


By providing a synopsis along with personalized recom- 
mendation information, the user can quickly make a 
determination. 


The movie detail information is displayed after a slight delay. 


we, ee een 


Detail overlay deactivation 


Moving the mouse outside the box shot immediately re- 
moves the movie detail information. 


we, 


Figure 5-8. Netflix shows “back of the box” information in an overlay as the user hovers over a movies 
box shot 


Considerations 


The overlay provides a nice way to reveal a synopsis for a movie. In a sense it is like flip- 
ping over the DVD box and reading what is on the back. 
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Activation 


The overlay is displayed when the mouse hovers over a box shot. There is about a half- 
second delay after the user pauses over a movie. The delay on activation prevents us- 
ers from accidentally activating the overlay as they move the cursor around the screen. 
Once the user moves the cursor outside the box shot, the overlay is removed immediately. 


Removing it quickly gives the user a fast way to dismiss it without having to look for a 
"Close” box. 


Tip 
For Detail Overlays activated by a mouse hover, provide a slight delay before displaying. 


You can find the same interaction style employed on Yahoo! News. When the user hovers 
over news story links in various areas (like Most Popular), a sneak peek shows the news 
photo and lead of the story (Figure 5-9). 
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Figure 5-9. Yahoo! News reveals more about a story without a user having to click to another page 


In both cases the user is given the additional context to make a decision about what to 
do next. In the case of Netflix, a movie's description or rating prediction may lead to the 
user renting the movie. With Yahoo! News, since click-throughs to news stories are more 
intentional, the user will be taken to stories that interest him. This creates a sense of user 
satisfaction and control, both of which are ingredients to a good user experience. 


Anti-pattern: Mouse Traps 


It is important to avoid activating the Detail Overlay too easily. We have seen usability 
studies that removed the delay in activation, and users reported that the interface was “too 
noisy” and “felt like a trap”. We label this anti-pattern the Mouse Trap. 


The reasoning for this is not clear, but Amazon uses the Mouse Trap anti-pattern in one of 
its “associate widgets”. In Figure 5-10 the link “Ray! Original Motion Picture Soundtrack” 
activates an overlay providing information on the soundtrack and a purchase option. Pre- 
sumably, this approach is intended to drive purchases—but it also presents an annoying 
experience. 
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To see 3 product preview in action, hover over the ink below 
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Figure 5-10. Amazon shows a book-buying widget on simple hover—but requires clicking the “Close” 
box to dismiss it 


Anti-pattern: Non-Symmetrical Activation/Deactivation 

When the user moves her mouse over the link, the overlay springs up immediately. The 
only way she can remove the overlay is by clicking the small close button in the upper 
right. Using Non-Symmetrical Activation/Deactivation is also a general anti-pattern 
that should be avoided. It should take the same amount of effort to dismiss an overlay as 
it took to open it. 


Compare the Amazon approach to both the Netflix and Yahoo! News approaches. The 
activation is slightly harder (pause, slight delay) than the deactivation (immediate when 
mouse is moved away). 


Tip 


Make activation and deactivation symmetrical interactions. 


Another example of Non-Symmetrical Activation/Deactivation turns up in a previous ver- 
sion of Yahoo! Foods (Figure 5-11). To see all main ingredients for a recipe, the user clicked 
a red arrow. This activated an overlay with the ingredients. However, clicking on the arrow 
again did not collapse the overlay. Instead, the user had to click on the close button (red X). 
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Figure 5-11. Yahoo! Foods All Main Ingredients drop-down is activated by clicking on the arrow and 
can only be deactivated by clicking the close button (X) 
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Anti-pattern: Needless Fanfare 


One of the advantages of a lightweight overlay is the ability to pop it up quickly. After a 
slight delay in activation (recall the half-second delay used by Netflix), you would not 
want or need the overlay to come up slowly. But in the case of Borders online, this is pre- 
cisely the approach taken (Figure 5-12). First the activation is immediate (no delay). This 
creates the noisy, mouse-trap interface just discussed. Second, there's a needless anima- 
tion that zooms the box up into place and then back down when the mouse moves away 
from a book. Needless Fanfare is an anti-pattern to avoid. 


Figure 5-12. Each Detail Overlay is preceded by the Needless Fanfare of a one-second animation that 
zooms the information into place 


The animation takes a full second to complete. Instead of delaying before activation, it de- 
lays after activation. Perhaps the design team thought that the animation tied the details 
to the item it zoomed out from. However, the Netflix approach simply creates a bubble 
effect that points back to the item it is revealing information for (Figure 5-7, right). 


Tip 
Once activated, show Detail Overlays immediately without fanfare. 


Anti-pattern: Hover and Cover 

We discussed the anti-pattern Hover and Cover in Chapter 2, and it's important to keep 
this anti-pattern in mind when providing a Detail Overlay. In the Netflix example (Figure 
5-7), the overlay does not get in the way of moving to the next box shot. Even though it 
covers the neighboring box shot, moving the mouse outside the original one removes the 
overlay immediately, providing a clear path to get an overlay on the next box shot. 


Compare this to the Detail Overlay provided by barnesandnoble.com (Figure 5-13). 
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Figure 5-13. Barnes & Noble does not need Detail Overlay since the information is exactly the same as 
displayed on the page 


Barnes & Noble uses a Detail Overlay in a completely useless manner. The overlay con- 
tains exactly the same information that the page already contained! Not only that, but the 
overlay almost completely obscures the other item displayed on the page. It also creates an- 
other common problem—the book image (dictionary) in the overlay is not positioned the 
same as the book image on the page (about 12 pixels difference). The shift causes the annoy- 
ing illusion that the book is wiggling back and forth, which detracts from the experience. 


On the other hand, AOL Finance provides a very nice example of pulling detailed stock 
information into an overlay that fits in a seamless manner, provides additional informa- 
tion, and does not cover up the navigation to the next item that might be of interest 
(Figure 5-14). 
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Figure 5-14. AOL Finance provides additional information without preventing other navigation; the 
detail is activated by clicking on the blue arrow button 


Best Practices for Detail Overlay 


Here are some best practices to keep in mind: 


Use Detail Overlays to give a sneak peek at detailed information. This will avoid unneces- 
sary page transitions. 

For hover-activated Detail Overlays, provide a slight delay for activation (about half a 
second). This will avoid the interface behaving like a Mouse Trap. 

For hover-activated Detail Overlays, provide a simple deactivation (e.g. simple mouse 
out). 

For Detail Overlays, make activation and deactivation symmetrical (don’t make it harder 
o get out of the overlay than it was to activate it). 


Once activated, avoid lengthy animations or effects that delay showing a Detail Overlay. 
Use hover when clicking the object is reserved for a different action. In Yahoo! News, click- 
ing on the link takes you to the news story page. Hovering gives you a sneak peek. 


Use hover when it is not obvious how to get more information. If you use hover to activate 
he details, you don’t need additional user interface controls for activation. 

Use click if you prefer to make getting details more explicit. Usually you will couple this 
with a“see more” or a button that exposes more detail. Yahoo! Foods (Figure 5-11) uses a 
red arrow to indicate drop-down information. AOL Finance uses a blue arrow button to 
indicate more information (Figure 3-10). 

Use click if you will be providing additional links inside the overlay. Trying to keep an over- 
ay in place (that was activated by hover) and click a link inside it is difficult. 
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Input Overlay 


Input Overlay is a lightweight overlay that brings additional input information for each 
field tabbed into. American Express uses this technique in its registration for premium 
cards such as its gold card (Figure 5-15). 
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Input form 


The form is displayed with simple 
prompt/input for each field. No ad- 
ditional help information is shown 
statically. 


Input overlay 


Tabbing or clicking into any field 
wraps the field in an overlay. The 
overlay provides additional input 
information. 


Obscuring fields 


The overlay does obscure fields just 
below it, but not to the left or right. 


Deactivation 


Clicking anywhere removes the over- 
lay. This lets the user click through 
the field covered by the overlay. 


Figure 5-15. American Express provides Input Overlays to guide the user through the signup process 
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Considerations 


There are a few things to keep in mind when using Input Overlays. 


Clear focus 


As the user tabs or clicks from field to field, the field gets wrapped in an overlay. The over- 
lay contains additional input help information. This allows the normal display ofthe form 
to be displayed in a visually simple manner (just prompts and inputs). The overlay creates 
focus on the given input field. Instead of seeing an ocean of inputs, the user is focused on 
just entering one field. 


Display versus editing 

Additionally, when the Input Overlay is shown, the prompt is displayed in exactly the 
same manner as when the overlay doesn't show. This is critical, as it makes the overlay feel 
even more lightweight. If the overlay prompt were bold, for example, the change would 
be slightly distracting and take the focus away from input. The only difference between 
the non-overlay field and the overlay version is a slightly thicker input field border. This 
draws the eye to the task at hand—input. 


Anti-pattern: Hover and Cover 


But what about the anti-pattern, Hover and Cover? Doesn't this cause the same issues 
that we saw earlier? For example, in Figure 5-15 (“Obscuring fields”), the “Name on Card” 
overlay hides the “Home Apt/Suite#” and “Home Phone Number Fields” fields below it. 
There are several reasons that American Express was able to employ this overlay in forms 
and “get away” with covering some fields during input: 


Field traversal 
The field traversal is side-to-side. The overlay for the “First Name” field (Figure 5-15, 
“Input overlay”) does not obscure the next field, “Last Name”. 


Tab navigation 
Since tabbing is a primary navigation for forms, the mouse is not needed to navigate. 
This allows navigation to fields even if they were covered. 


One-click deactivation 
Clicking anywhere hides the overlay. That means that when the “Name on Card” 
overlay is shown (Figure 5-15, “Obscuring fields”), clicking anywhere in the “Home/ 
Apt Suite#” field will remove the overlay, allowing the user to click in the previously 
hidden field (Figure 5-15, “Deactivation’). 
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Two additional touches that would help with field-covering issues include: 
+ Give the overlay a slight translucency in order to faintly reveal the fields below. 


e Allow a click deactivation to not only deactivate the overlay but click through to the 
field that was clicked over. This allows the user to click into a field shown through 
the overlay. 


Best Practices for Input Overlay 


Here are some best practices to keep in mind: 
Use Input Overlays to simplify the visual style of a form. Place additional help in the 
overlay. 
For Input Overlays, make sure the only visual change between the field and the overlay 
field is intentional (e.g., making input field visually bolder). 
For Input Overlays, allow clicking anywhere to deactivate the overlay. 
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Chapter 6 
Inlays 


Not every bit of additional control, information, or dialog with the user needs to be an 
overlay. Another approach is to inlay the information directly within the page itself. To 
distinguish from the pop-up overlay, we call these in-page panels Inlays. 


Dialog Inlay 


A simple technique is to expand a part of the page, revealing a dialog area within the page. 
The BBC recently began experimenting with using a Dialog Inlay as a way to reveal cus- 
tomization controls for its home page (Figure 6-1). 


Activation 


The “Customize homepage” 
button activates the cus- 
tomization inlay. 
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Customization inlay (slide) 


The inlay slides into view. 


Customization inlay 


The additional customization 
controls for the BBC home 
page are shown directly in 
context with the rest of the 
page. 


Figure 6-1. The BBC home page puts its customization tools in an inlay that slides out when activated 


Considerations 


Of course an overlay could have been used instead. However, the problem with overlays 
is that no matter where they get placed, they will end up hiding information. Inlays get 
around this problem by inserting themselves directly into the context of the page. 


Tip 
Inlays provide in-context dialog with the user. 
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In context 


This Dialog Inlay is similar to a drawer opening with a tray of tools. Instead of being tak- 
en to a separate page to customize the home page appearance, the user can make changes 
and view the effects directly. The advantage is the ability to tweak the page while viewing 
the actual page. 


My Yahoo! also provides a Dialog Inlay for revealing its home page customization tools. 
The original version of My Yahoo! did not use this approach. Instead, customizations 
would take the user away to a separate page (Figure 6-2). 
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Figure 6-2. In an original version of My Yahoo!, clicking on “Change Colors” takes you to a separate 
page to customize colors 


Figure 6-3 shows the new My Yahoo!, incorporating an Dialog Inlay that slides into place 
to reveal customization tools for changing the pages appearance. 
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Figure 6-3. My Yahoo! allows the page to be customized inline by using an Inlay Dialog panel that 
slides into view 
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Here's one more example, which shows how a Dialog Inlay can be used to operate on spe- 
cific objects within an interface. In Yahoo! Bookmarks, selected bookmarks can be edited, 
deleted, etc. Because a pop up will often hide the items being operated on (the user ends 
up having to move the dialog pop up out of the way to make sure the right object is being 
deleted), an inlay can work nicely when tied in with a toolbar (Figure 6-4). 
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Figure 6-4. In Yahoo! Bookmarks, clicking “Edit Tags” expands a Dialog Inlay for editing the two 
bookmarks selected 


By being in proximity to the toolbar and keeping the objects visible, the Dialog Inlay pro- 
vides a clear way to expose additional interface elements in context. In all of the previous 
examples, the panel is revealed with an animated slide in transition. This provides a nice 
way to smooth out the experience (we will discuss transitions in Chapters 11 and 12). 
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Best Practices for Dialog Inlay 


Here are some best practices to keep in mind: 
Use Dialog Inlays for page customization. It is helpful to tweak the page and see the 
results at the same time. 


To smooth the introduction of the Dialog Inlay into the page, use a quick slide in 
animation. 


Use Dialog Inlays to connect the dialog with the element it slides out from. 
Use Dialog Inlays for secondary tools that aren't primary to the main flow of the page. 


List Inlay 


Lists are a great place to use Inlays. Instead of requiring the user to navigate to a new page 
for an item's detail or popping up the information in an Overlay, the information can be 
shown with a List Inlay in context. The List Inlay works as an effective way to hide detail 
until needed—while at the same time preserving space on the page for high-level over- 
view information. 


Google Reader provides an expanded view and a list view for unread blog articles. In the 
list view, an individual article can be expanded in place as a List Inlay (Figure 6-5). 
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Figure 6-5. In list view, Google Reader shows all articles as a collapsed list—except for the one that is 
currently selected 


Considerations 


By allowing the reader to move through a list of article titles (by mouse or keyboard), 
the articles can be scanned quickly so she can decide which should be looked at in detail. 
Clicking on an article title expands the article in place. Showing one item at a time focuses 
the reader on the current content. 


Tip 
Expanding content in context is a powerful way to help users understand information. 
It follows the principle of focus+context.” 


Accordion: One-at-a-time expand 


The Accordion is an interface element that employs the List Inlay pattern to show only 
one open panel in a list at a time. The following weather widget demo uses weather.com 
to display real-time weather information in an accordion (Figure 6-6). 


* Focus+context enables users to see the object of interest in full detail while at the same time getting a overview 
of the surrounding context. It is also related to Jenifer Tidwell’s design pattern, “Overview Plus Detail,” de- 
scribed in her book Designing Interfaces (O'Reilly). 
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One panel at a time 


The weather demo uses an accordion to display a single panel 
of weather-related information at a time. 
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Figure 6-6. The weather demo illustrates the way an accordion works: only one panel is revealed at a 
time 


In this example, the accordion allows only one weather pane to be visible at a time. When 
a pane is activated it slides open, simultaneously closing the previously open panel. 
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Accordions work best when: 
«+ Each pane of content is independent 
e Only one pane is visible at a time 


«+ Each pane can be logically titled 


Accordion: More than one pane visible at a time 
You may want to allow multiple panes to be visible at a time if: 


e Detail panes provide context for one another 
+ The vertical height of the accordion area is not fixed 


e Different panels of content may be different heights 


Parallel content 


The Yahoo! Autos Car Finder tool (Figure 6-7) uses an accordion-style interaction for 
search filters that allows more than one pane to be open at a time. This choice makes sense 
because the decisions needed for one detail pane may be affected by the details of another 
pane. However, one problem with this specific implementation is the lack of information 
when a pane is closed. For example, no summary information is given for the “Price” tab. 
Looking at that button, it is not clear whether search criteria has been set or what it might 
be set to without first opening the pane. 
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Figure 6-7. Yahoo! Autos places filter criteria in Accordion panes; when panes are hidden, no summary 
information is provided 
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Wine.com takes the opposite approach (Figure 6-8). Each area is initially open. All filters 
are displayed. As the user selects filters, the area collapses partially to show the results of 
filtering. This strategy accomplishes a few things. First, it gets rid of detail progressively— 
unnecessary information is hidden. Second, it invites the user to interact with the hidden 
content (with the “view all” link). Third, it provides summary information for panels that 
do not need to be opened as often. 


narrow search by: narrow search by: narrow search by: 
price {viger all) price (view ali) price [ien ain 
$20 - $40 $20 - $40 $20 and Below 
type (view all) type Liew aii) type {view all) 
Bed Wine Red Wine Bed Wine 
Cabernet Sauvignon Cabernet Sauvignon Cabernet Sauvignon 
region region (view all) region (view ait) 
wasincton “yaa Val Fre 
Napa Valley Napa Valley 

France - Other reaions Central Coast professional ratings 
South America North Const The Wine Advocate 


Figure 6-8. Wine.com never closes a pane completely; as filters are selected, it partially closes and 
summarizes the choices 


Accordions can also be horizontally oriented. This is usually best done in nontraditional 
interfaces. A good example is the Xbox 360 interface (Figure 6-9). 


Figure 6-9. The Xbox 360 provides a novel menu interface by using a horizontal accordion 


Even though the previous examples vary in visual and interaction styles, they all share the 


List Inlay pattern as a basic approach to revealing additional content in the context of the 
existing page. 
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Best Practices for List Inlay 


Here are some best practices to keep in mind: 
+ Use List Inlay when the context of the other items in the list help the user understand 
the visible inlay. 


- Use List Inlay to avoid having users navigate to a new page or popping up an overlay to 
see an item’s detail. 


+ Restrict it to show only a single item when you need to preserve space and the hidden 
content is not critical to the opened content. 


+ Allow multiple items to be visible for parallel content (like filters in a search). 


Detail Inlay 


A common idiom is to provide additional detail about items shown on a page. We saw this 
with the example of the Netflix movie detail pop up in Chapter 5 (Figure 5-8). Hovering 
over a movie revealed a Detail Overlay calling out the back-of-the-box information. 


Details can be shown inline as well. Roost allows house photos to be viewed in-context for 
a real estate listing with a Detail Inlay (Figure 6-10). 


Lint View Map View Gallery View >| In-context tools 


Hovering over a real estate list- 


gS ed sas tb, A™ wath new å 6 5 R 
ing brings in a set of in-context 
arn mi er ESS | tools, including the “View pho- 


Listing courtesy of Qut of Area Orce ” 
| ae apariar © | tos'tool. 


ee 3838950 37 Bassett St 
3bd/ 3ds San Jose. CA 95110 
Listing courtesy of Courtesy Brokerage © 
s View Additional Detaits ~- 


List View Map View Gallery View »| House photos inlay 
© Recenty acted KI 
Clicking on the “View photos" 
link expands the real estate 

marty gl i beg rere item to include a carousel of 


Listing courtesy of Out of Area Obce ON 
| s View Additional! Detaits w house photos. 


& 


cmc $639.950 37 Bassett St 
Ind / 3da San Jose. CA 95110 
Listing courtesy of Courtesy Gromerage a 
View Additional Details 


EJ Save nered sea i Alert me with new tating 


Download at WoweBook.Com 


Detail Inlay 133 


Lint View Map View | Gallery View »| Detail overlay 


The Detail Inlay contains 


a SL cme ann a thumbnails of house pho- 
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nsa gay a © | thumbnail pops up a Detail 


Overlay with a larger photo of 
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Figure 6-10. Roost provides both Detail Inlay and Detail Overlay patterns to show home photos 


Considerations 


One of the more difficult things to do on most real estate sites is get a view of the house 
in context without having to navigate from page to page. The curb appeal, inside view, 
and backyard are all key factors in driving interest for a house. Knowing this, the team at 
Roost wanted to make it really easy to get to the photos quickly. 


Combining inlays and overlays 


Roost’s solution was to combine several patterns. First, it uses the Hover Reveal, a Con- 
textual Tools pattern, to reveal a set of tools when the user hovers over a listing. Second, it 
uses the Detail Inlay pattern to show a carousel of photos when the user clicks on the “View 
photos” link. And finally, it uses a Detail Overlay to blow up a thumbnail when clicked on. 


Compare this to the traditional approach, one that requires the user to navigate from the 
listing page to a photo page and back again. The Roost team actually expended a Hercu- 
lean effort in setting up this convenience, as it is dealing with hundreds of MLS listings 
with different contractual requirements for displaying real estate photos. The Roost team 
worked out the difficulties behind the scenes to create a nice user experience. 


Best Practices for Detail Inlay 


Here are some best practices to keep in mind: 


Use Detail Inlay to provide additional information in context without hiding other 
information. 

Use Detail Inlay to avoid the anti-pattern Hover and Cover. 

Make it easy to dismiss the Detail Inlay. 
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Tabs 


Lest we forget, there are some very traditional interface elements that can be used to inlay 
details. Tabs, for instance, can be used as a Detail Inlay. Instead of moving the user from 
page to page (site navigation), tabs can be used to bring in content within the page, keep- 
ing the user in the page. 


Considerations 


In Figure 6-11 you can see not just one type of tab for Yahoo!’s home page, but three! 
Three different tab styles and interactions can be confusing. In fact, user-testing revealed 
this to be the case. However, the design sidestepped some of the problem by giving the 
three tab areas each a different visual style. Let’s look at each type of tab interaction. 


— Emenainment Sports Video Hi, Bill Sign Oe 


& Cute hamster eats broccoli 
Mail 
See what happens when this little guy Pall & @ vessenger | A ram | 


gets overexcited about his daily greens 
» Viral video hit 


DT) pushy hamster fie Peel vice cog 


g Q Search: Teach your pets cool tricks 


Viral video Nt: Baby hamster 
` cats brocco 


Gas pumo glitch May be why sharks attack anc how 
] costing you Money to stay safe 


» More: Featured Gurr 


See the top picks in the NFL 
craft 


Figure 6-11. Yahoo's home page employs three different Tab styles to encourage exploration of 
additional content 


Traditional tabs 


The Featured, Entertainment, Sports, and Video sections are styled as a traditional tab 
notebook (Figure 6-11, callout ©). Going from section to section requires the user to 
click on the corresponding tab. Most studies on tabs find that the first and second tabs get 
the most activity and the subsequent tabs get clicked less frequently. This is the rationale 
for placing the “Featured” content first. 
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Content tabs 


Each section has four featured stories. In this example, the “Cute hamster” is tied to the 
thumbnail and story lead (Figure 6-11, callout @). Clicking on a story lead switches the 
content inside the tab. Effectively this is a secondary tab control, but visually it appears as 
a content story. By switching in the story without leaving the page, the user can get a peek 
at the top stories. 


Personal assistant tabs 


On the right side of the page, Yahoo! provides what it calls a Personal Assistant. Each tab 
in this area (Mail, Messenger, etc.) is activated by hovering over the tab. In our example 
the mouse is hovered over the Mail tab (Figure 6-11, callout ©) and it automatically ex- 
pands open. Clicking on the link actually takes the user to Yahoo! Mail. 


The three types of tabs vary greatly, visually and interactively. However, Yahoo! is able to 
pull this off because: 


e Normal users of Yahoo! will discover these interactions over time. 


e Creating the contrast makes a more visually compelling interface, as well as making 
the interaction feel deeper (inviting exploration). 


+ Itis a great improvement over the old Yahoo! home page, which was completely static. 
Every link took the user to a different page. Keeping users on the page until they are 
ready to leave actually creates a happier user experience. 


Best Practices for Tabs 


Here are some best practices to keep in mind: 
Use tabs to display additional content inline. 
Avoid using multiple tabs on a single page. 


f you do use more than one set of tabs on a page, create a visual contrast to distinguish 
he tab content areas. 


Put the most important content in the first tab. Many users may not navigate to any of 
he other tabs. 


Activate tabs with mouse click. 


f revealing the content on other tabs is important, you can activate tabs on hover—but 
use this sparingly as it can be annoying (e.g., personal assistant tab on the Yahoo! home 


page). 
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Inlay Versus Overlay? 


In these last two chapters we discussed overlays and inlays. How do we choose which 
makes sense in our interface? The following guidelines provide some suggestions on 
which to choose in a given situation: 


+ Use an overlay when there may be more than one place a dialog can be activated from 
(the exception may be showing details for items in a list). 


e Use an overlay to interrupt the process. 
e Use an overlay if there is a multi-step process. 


e Use an inlay when you are trying to avoid covering information on the page needed 
in the dialog. 


e Use an inlay for contextual information or details about one of many items (as in a 
list): a typical example is expanding list items to show detail. 
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Overlays allow you to bring additional interactions or content in a layer above the cur- 
rent page. Inlays allow you to do this within the page itself. However, another powerful 
approach to keeping users engaged on the current page is to create a virtual page. That is 
to say, we create the illusion of a larger virtual page. 


Tip 
Think of the interface as a children's pop-up book. Additional real estate can be called 
on as needed to extend the interface. 


Patterns that support virtual pages include: 
e Virtual Scrolling 
e Inline Paging 
+ Scrolled Paging 
+ Panning 


«+ Zoomable User Interface 


Virtual Scrolling 


The traditional Web is defined by the “page.” In practically every implementation of web- 
sites (for about the first 10 years of the Web's existence) pagination was the key way to get 
to additional content. Of course, websites could preload data and allow the user to scroll 
through it. However, this process led to long delays in loading the page. So most sites kept 
it simple: go fetch 10 items and display them as a page and let the user request the next 
page of content. Each fetch resulted in a page refresh. 


The classic example of this is Google Search. Each page shows 10 results. Moving through 
the content uses the now-famous Google pagination control (Figure 7-1). 
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Figure 7-1. The now-famous Google pagination control illustrates the most common way to move 
through data on the Web 


Another approach is to remove the artificial page boundaries created by paginating the 
data with Virtual Scrolling. In Yahoo! Mail, mail messages are displayed in a scrolled list 
that loads additional messages on demand as the user scrolls (Figure 7-2). 
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Scrolled list 


Email messages are displayed as 
a scrolled list. This has been the 
normal approach on desktop mail 
clients. Yahoo! Mail brings that ap- 
proach to the Web. 


Scrolling 


Messages are loaded on demand. As 
the user scrolls, the content items 
are filled in. While loading, the mes- 
sage lines are replaced with the text 
“Loading...” 


Scroll completes 


Messages are displayed based on 
where the user scrolled to. 


Figure 7-2. Instead of showing just the messages that can be displayed on a single page, Yahoo! Mail 
dynamically loads messages as the user scrolls 
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Considerations 


In some sense Virtual Scrolling turns the scrollbar into a “pagination control” But in- 
stead of a page refresh, the messages are seamlessly brought into the message-list pane, 
giving the illusion of a larger virtual space. 


Desktop-style applications 

In testing Virtual Scrolling, Yahoo! found that users naturally understood the scrolling 
paradigm, most likely because they were already accustomed to this feature on desktop 
mail clients. Since the Yahoo! Mail Web application looks very similar to desktop web ap- 
plications, the expectation for scrolling already exists in the user’s mind. 


Tip 
The more the web application looks and behaves like a desktop application, the more 
intuitive desktop idioms (like Virtual Scrolling) are to the user. 


Loading status 


There are a few downsides to the Yahoo! Mail version of Virtual Scrolling. First, if the 
loading is slow, it spoils the illusion that the data is continuous. Second, since the scrollbar 
does not give any indication of where users are located in the data, they have to guess how 
far down to scroll. A remedy would be to apply a constantly updating status while the user 
is scrolling. 


Progressive loading 


Microsoft has applied Virtual Scrolling to its image search. However, it implements it in 
a different manner than Yahoo! Mail. Instead of all content being virtually loaded (and 
the scrollbar reflecting this), the scrollbar reflects what has been loaded. Scrolling to the 
bottom causes more content to load into the page (Figure 7-3). 
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Scrolling 


By scrolling into the area where results have not been 
loaded, images are initially represented as gray squares 
to indicate that they are currently not loaded. 


As each image is loaded it replaces the gray squares. 


At the top, the start and end range of the visible im- 
ages is displayed (“Images 46-70 of 12,500,00°). 


Scroll completes 


Image results are fully loaded, and the scrollbar is up- 
dated to reflect where this page is in relation to the 
previously loaded content. 


Figure 7-3. Microsoft Live Image Search uses Virtual Scrolling to fetch additional search results 


The Live Image Search approach does a nice job of eliminating paging. It gets around the 
“Where am I?” issue by progressively loading and dynamically adapting the scrollbar to 
reflect how much has been loaded. 


Tip 


Use progressive loading of content when the data size is large or unknown. 


This type of Virtual Scrolling (where the scrollbar only reflects what has been directly 
loaded) works well for search results since relevance starts dropping off the further you 
move through the data. But with mail messages, this is not the case and would not be a 
good approach since users need to access messages beyond just those loaded at the top. 
The Microsoft approach also provides no way to jump to the bottom (although in this 
case the option is not needed since the end of all results has little or no relevance). 
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One more example illustrates an endless wall of pictures and uses a novel approach to a 
scrollbar control for Virtual Scrolling. PicLens is a Firefox add-on that allows viewing 
images from Google Search, Flickr, and other services to be displayed in the browser as a 
wall of photos that can be scrolled through (Figure 7-4). 


Figure 7-4. PicLens provides an endless wall of photos; the scroller at the bottom continues to expand 
with more content 


The scrollbar dynamically resizes and relocates its thumb based on the amount of content 
loaded and where it is in the data (Figure 7-5). It also cleverly discards the beginning as it 
gets further and further into the content. The basic idea is to give users good navigation 
no matter where they are in the gallery of images. 


Figure 7-5. The scroller in PicLens dynamically adapts to show the user's orientation in the data; it 
indicates how many images are shown and to some degree where the user is in the wall of images 


These examples of Virtual Scrolling demonstrate three different ways to manage the vir- 
tual space: 


e Yahoo! Mail creates the illusion that all data has been loaded up-front by having the 
scrollbar reflect the total virtual space. 


e Microsoft Live Search creates the virtual illusion as the user moves down through the 
search results. 
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e And PicLens does the same with the caveat that it shows a virtual window in the 
larger virtual space (by only providing a scroller control for where the user is and 
some before and after context). 


Best Practices for Virtual Scrolling 


Here are some best practices to keep in mind: 
Keep the users informed about where they are. Either use a tool tip or status area to com- 
municate the range of data they are scrolling into. 
Give feedback while waiting on data to load. 
Create the illusion of an entire loaded virtual space for when the data feels like a data set 
(e.g., Yahoo! Mail's mail messages). 
Extend the virtual space during scroll for search results (e.g., Microsoft Live Search). 
Keep a limited virtual space when the user is moving through search results in order to 
provide a nice back-and-forth experience (e.g., PicLens). 


Inline Paging 

What if instead of scrolling through content we just wanted to make pagination feel less 
like a page switch? By only switching the content in and leaving the rest of the page stable, 
we can create an Inline Paging experience. This is what Amazon's Endless.com site does 
with its search results (Figure 7-6). 


ure a Paginated results 
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Searching for "Men's athletic shoes 
eet es z displays a traditional-looking set of 
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mure ae Inline Paging 


Clicking to “page 3” causes just the 
search results area to update with the 
third page of results. 


ure a Page remains stable 


The rest of the page stays stable when 
the new “page” of results is brought 
into view. 


Figure 7-6. Endless uses Inline Paging to create a seamless experience moving through search results 


Considerations 


There are some issues to consider with Inline Paging. 


In-page update 

Endless.com provides the normal pagination controls. But instead of the whole page re- 
freshing, only the results area is updated. Keeping the context stable creates a better flow 
experience. With Inline Paging it feels like the user never leaves the page even though 
new virtual pages of results are being brought into view. 


Tip 


Paging is sometimes the most convenient and natural way to break up information. 
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Natural chunking 

Inline Paging can also be useful when reading news content online. The International 
Herald Tribune applied this as a way to page through an article while keeping the sur- 
rounding context visible at all times (Figure 7-7). 
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Figure 7-7. The International Herald Tribune uses Inline Paging to seamlessly move through a story 
without losing context 


Gmail also uses Inline Paging (Figure 7-8). A set number of messages is displayed on 
the page. Clicking the “Older” or “Newer” links moves the user to a new set of messages. 
However, instead of refreshing the complete page, just the message area updates. While 
there is still some interruption whenever the user switches pages, by making the transi- 
tion “stay in the page” the interaction feels much lighter, and a virtual space is created 
through clever use of pagination. 
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Figure 7-8. Gmail paginates seamlessly by only updating the message area 


Sometimes Inline Paging can be as simple as clicking on a button to load more items into 
the page on demand. The newly loaded content can be added to the current page. This 
allows the content to be scrolled, but places the control outside the scrollbar. 


Back button 


The biggest issue with Inline Paging is whether the back button works correctly. One 
criticism of Endless.com is that if the user pages through search results and then hits the 
back button, it jumps to the page just before the search. This unexpected result could be 
fixed by making the back button respect the virtual pages as well. This is the way Gmail 
handles the back button.” Clicking back moves you through the virtual pages. 


Interactive content loading 


The iPhone employs inline paging when displaying search results in the iTunes store 
(Figure 7-9). 


* This was not always the case. Originally, Gmail did not handle the back button correctly. In the most recent 
versions, however, it has provided correct handling for the back button. 
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Figure 7-9. The iPhone iTunes store displays 25 songs initially; the “Load 25 More Results...” button 
fetches 25 more songs 


Each tap of the “Load 25 More Results...” button loads 25 more songs. The number of 
songs loaded is cumulative. With the first tap there are now 50 songs; the third tap, 75 
songs; and so on. Normally no scrollbar is shown. However, if the user places a finger on 
the list to move up or down, the scrollbar is displayed (Figure 7-10). Since the finger is 
the “scroller; the scrollbar becomes just an indicator of how many songs are loaded and 
where the user is in the list. 
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Figure 7-10. The scrollbar displays when the user starts scrolling through the content; the scrollbar is 
just a feedback mechanism to indicate scrolling is happening, how much content is loaded, and where 
the user is in the scroll operation 
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Best Practices for Inline Paging 


Here are some best practices to keep in mind: 
Use Inline Paging for material that is naturally “chunked” but for which you still want to 
create a smooth viewing experience when moving between pages. 
Respect the back button. Make it work for paging (e.g., Gmail). 
Only update the “virtual page” and not the entire page when inline paging. 
Consider progressive loading as a way to page-in more content in a virtual space. 


Scrolled Paging: Carousel 


Besides Virtual Scrolling and Virtual Paging, there is another option. You can combine 


both scrolling and paging into Scrolled Paging. Paging is performed as normal. But in- 
stead the content is “scrolled” into view. 


The Carousel pattern takes this approach. A Carousel provides a way to page-in more 
data by scrolling it into view. On one hand it is a variation on the Virtual Scrolling pat- 
tern. In other ways it is like Virtual Paging since most carousels have paging controls. The 
additional effect is to animate the scrolled content into view. 


Yahoo! Underground uses a Carousel (Figure 7-11) to provide a way to page/scroll 
through articles. 
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Animation 


Animation reinforces the 
fact that the articles are 
from the past (the content 
moves in from the left to 
the right). 


Figure 7-11. Yahoo! Underground uses a Carousel to communicate a timeline of blog articles 


Considerations 


There are some issues to consider when using Scrolled Paging. 


Time-based 


Carousels work well for time-based content. Flickr employs a Carousel to let users navi- 
gate back and forth through their photo collection (Figure 7-12). 


153 of your photos :: 0 selected | Solon! of 


Figure 7-12. Flickr uses a Carousel to allow the user to get photos in chronological order; this makes it 
possible to find photos without leaving the current page 


Tip 
Carousels are best for featured or recent content. They are also good for small sets of 
time-based content. 


Animation direction 


Inexplicably, AMCtheatres.com animates its Carousel the opposite way. This leads to a 
confusing experience, and it’s harder to know which control to click (Figure 7-13). 
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Figure 7-13. AMC animates its carousel backward from the accepted standard: clicking the right arrow 
should scroll in content from the right (not the left) 


Carousel Best Practices 


Here are some best practices to keep in mind: 


Carousels are best for visually distinct contents. Images, CD covers, and movie box shots 
are all natural items to place in a carousel. 
f the content is not in a discernible order, users will get frustrated navigating. 


f the content is highly relevant at the beginning and relevancy drops off, a Carousel is a 
good solution, since it spotlights the most relevant items. 


f there is alot of content to display, carousels provide too small of a window and thus can 
frustrate users when they actually try to find content. 


f there is limited space available for a set of content, a Carousel allows the virtual content 
o be placed in a row on the page. 
p 


acing arrows at each end can become tedious if the Carousel is not circular or if the user 
eeds to go back and forth through the content. 


acing back and forth arrows next to each other is simpler to operate but somewhat less 
scoverable. It solves the back and forth issue but moves the buttons away from their 
aturally expected position (think scrollbars). 


ake the content big enough to view easily, providing enough whitespace to make each 
item distinct. 


D aU 2 


Allow a portion of the next item to be partially revealed. This invites the user to scroll the 
content to see the partial content fully. 


icking the left arrow should scroll content in from the left (left to right), and clicking the 
right arrow should scroll content in from the right (right to left). 


D 


Virtual Panning 


One way to create a virtual canvas is to allow users the freedom to roam in two-dimensional 
space. A great place for Virtual Panning is on a map. Google Maps allows you to pan in any 
direction by clicking the mouse down and dragging the map around (Figure 7-14). 
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Start drag 


Clicking and holding down changes 
the cursor into a hand (signifying 
panning). 


Dragging 


Dragging the canvas moves the map 
in real time. 


Figure 7-14. Google Maps creates a virtual canvas; one tool that helps with that illusion is the ability to 
pan from area to area 


Considerations 


There are some issues to consider while using Virtual Panning. 


Natural Visual Construct 


When we discussed dragging routes in Google Maps, we pointed out that drag and drop 
worked well since it fit with the natural visual representation of routes on the map (see 
Figure 2-26). In the same way, panning around in a map is a natural visual metaphor. 
Extending the visual space to a larger virtual space is a natural fit. 
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Gestures 


Besides map applications, the idea of Virtual Panning has been extended to other devices 
thanks to gesture-based interfaces.’ With the introduction of the iPhone, the user can 
simply “flick” through weather locations, photos, or an iTunes playlist. 


Flicking is similar to panning yet has some differences. With Virtual Panning the canvas 
only moves while the mouse is dragging it around. With flicking, if the user starts the 
dragging operation and releases, the canvas will continue moving with some momentum. 
The canvas slows in such a way as to mimic real-world forces. 


Best Practices for Virtual Panning 


Here are some best practices to keep in mind: 


Use Virtual Panning as an alternative to scrolling through an infinite 2D canvas. 
Consider allowing panning to continue with some momentum (think “flicking’). 


Zoomable User Interface 


A Zoomable User Interface (ZUI) is another way to create a virtual canvas. Unlike pan- 
ning or flicking through a flat, two-dimensional space, a ZUI allows the user to also zoom 
in to elements on the page. This freedom of motion in both 2D and 3D supports the con- 
cept of an infinite interface. 


Practically speaking, ZUIs have rarely been available in everyday software applications, 
much less on the Web. But with more advanced features added to Flash and the advent 
of Silverlight, this type of interface is starting to emerge and may be commonplace in the 
not-too-distant future. 


Considerations 


Hard Rock Café has a large rock and roll memorabilia collection. Recently, it digitized 
photos of the collection and placed them online for virtual viewing." The memorabilia 
application uses a ZUI interface to move around from artifact to artifact and zoom in to 
see details on each item (Figure 7-15). 


* For a discussion on gestural interfaces, see Designing Gestural Interfaces by Dan Saffer (O'Reilly). 


+ The Hard Rock Memorabilia site is located at http://memorabilia.hardrock.com/. It was developed in Silverlight 
using Deep Zoom (a.k.a. Seadragon) by Vertigo Software in Point Richmond, CA. 
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Zoomed-out 


At the zoomed-out level the 
user can see thumbnails of the 
total collection. 
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Zooming in 


By using the mouse thumb- 
wheel, the user can zoom in (it 
is like flying) on any object. 


Detail stitched in 


As the user gets closer and 
closer, more detail is stitched 
in. Detail is only limited by what 
can be dynamically mapped in 
as the user zooms. 


Figure 7-15. Hard Rock Café uses a zoomable user interface (ZUI) to allow its memorabilia collection 
to be viewed online 
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Aza Raskin, son of the late Jef Raskin (who pioneered many of the original ZUI concepts) 
is continuing to experiment with user interfaces that push the current norms. He dem- 
onstrated some potential ZUI interactions in a concept demo for Firefox on the mobile 
(Figure 7-16).” 


Zoomed-in to content 


This browser page lives on a large canvas. This 
view is Zoomed in to the page. 


Slide over 


Using a panning technique, the page is pulled 
to the right, revealing a hidden toolbar on the 
left. 


Boounarks Zoomed-out 


The canvas can contain many “Tabs” or 
windows. 


* You can see Azas concept video at http://www.azarask.in/blog/post/firefox-mobile-concept-video/. 
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Add a Tab 


Clicking the plus sign adds a new Tab. The 
interface zooms out slightly, revealing a new 
window being created in the bottom left of 
the canvas. 


Zooming in to new Tab 


The canvas automatically zooms into the 
newly created Tab. 


New Tab 


The new Tab now fills up the screen as the in- 
terface settles in to a zoomed-in mode. 


Figure 7-16. Firefox Mobile Concept Prototype showing panning gestures as well as a ZUI interface 


In this concept prototype, two key ideas are presented: 


e Additional interface elements are just off the page to the top, left, bottom, and/or 
right. Pulling the content to one side or the other reveals these tools. 


e Moving between the canvas (desktop) and windows is accomplished with a ZUI 
interface. 


ZUIs provide the ultimate virtual canvas. By extending the concept of the page, the user 
never actually leaves the virtual page. 
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Best Practices for Virtual Spaces 


Here are some best practices to keep in mind: 
Use a hybrid Scrolled Paging for content that is time-based. 
Use Virtual Panning for moving around in a canvas (e.g., Google Maps). 
Use ZUIs to work on large sets of information that have lots of detail. 


Paging Versus Scrolling 


Leading web designers and companies have taken different approaches to solving the 
same problems. Yahoo! Mail chose Virtual Scrolling. Gmail chose Inline Paging. 


How do you choose between paging and scrolling? While there are no hard and fast rules, 
here are some things to consider when making the decision: 


When the data feels “more owned” by the user—in other words, the data is not tran- 
sient but something users want to interact with in various ways. If they want to sort 
it, filter it, and so on, consider Virtual Scrolling (as in Yahoo! Mail). 


When the data is more transient (as in search results) and will get less and less rele- 
vant the further users go in the data, Inline Paging works well (as with the iPhone). 


For transient data, if you don't care about jumping around in the data to specific sec- 
tions, consider using Virtual Scrolling (as in Live Image Search). 


If you are concerned about scalability and performance, paging is usually the best 
choice. Originally Microsoft's Live Web Search also provided a scrollbar. However, 
the scrollbar increased server-load considerably since users are more likely to scroll 
than page. 


If the content is really continuous, scrolling is more natural than paging. 


If you get your revenue by page impressions, scrolling may not be an option for your 
business model. 


If paging causes actions for the content to become cumbersome, move to a scroll- 
ing model. This is an issue in Gmail. The user can only operate on the current page. 
Changing items across page boundaries is unexpected. Changing items in a continu- 
ous scrolled list is intuitive. 
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Chapter 8 
Process Flow 


In the last three chapters we've been discussing the principle Stay on the Page. Sometimes 
tasks are unfamiliar or complicated and require leading the user step-by-step through a 
Process Flow. It has long been common practice on the Web to turn each step into a sepa- 
rate page. While this may be the simplest way break down the problem, it may not lead 
to the best solution. For some Process Flows it makes sense to keep the user on the same 
page throughout the process. 


Google Blogger 


The popular site Google Blogger generally makes it easy to create and publish blogs. One 
thing it does not make easy, though, is deleting comments that others may leave on your 
blog. This is especially difficult when you are the victim of hundreds of spam comments 
left by nefarious companies hoping to increase their search ranking. 


Blogger forces you to delete these comments through a three-step process. Each step isan 
individual page, all punctuated with a page refresh (Figure 8-1). 
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Figure 8-1. Google Blogger forces you through a three-step process for each comment you delete, which 
is especially tiresome if you have dozens of spam comments to delete 
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My (Bill’s) blog site was recently spammed. It turns out that my 100 or so articles all had 4 
or more spam comments. That means that I had to delete more than 400 spam comments. 
Given the way Google Blogger implemented comment deleting, I had to follow these steps 
for each comment on each blog article: 


1. Scroll to find the offending comment. 

2. Click the trash icon to delete the comment. 

3. After page refreshes, click the “Remove Forever” checkbox. 

4. Click the “Delete Comment” button. 

5. After the page refreshes, click the link to return to my blog article. 
6. Repeat steps 1-5 for each article with spam comments. 


It took 1,600 clicks, 1,200 page refreshes, 400 scroll operations, and several hours to finally 
rid myself of all of the spam comments. If the delete action could have been completed in 
the same page as the comments, that would have eliminated hundreds of clicks and well 
over a thousand page refreshes, and scrolling would have been all but eliminated. I would 
not have wasted all the mental energy to reorient myself after each page transition. And I 
would have been a much happier man. 


This is a common interaction flow on the Web. It turns out to be simpler to design and 
implement a process as a series of pages rather than a single interactive space. 


The Magic Principle 


Alan Cooper discusses a wonderful technique for getting away from a technology-driven 
approach and discovering the underlying mental model of the user. He calls it the “magic 
principle.” Ask the question, “What if when trying to complete a task the user could in- 
voke some magic?” For example, let’s look at the problem of taking and sharing photos. 
The process for this task breaks down like this: 


e Take pictures with a digital camera. 

e Sometime later, upload the photos to a photo site like Flickr. This involves: 
— Finding the cable. 
— Starting iTunes. 


— Importing all photos. 


* Discussed in his “Interaction Design Practicum” course, found at http://www.cooper.com/services/training/ 
ixd_practicum.html. 
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— Using a second program, such as Flickr Uploadr, to upload the photos to Flickr. 


— Copying the link for a Flickr set (which involves first locating the page for the 
uploaded set). 


e Send the link in email to appropriate friends. 
If some magic were invoked, here is how it might happen: 


e The camera would be event-aware. It would know that is your daughter’s eighth 
birthday. 


e When finished taking pictures of the event, the camera would upload the pictures to 
Flickr. 


e Flickr would notify family and friends that the pictures of the birthday party are 
available. 


Thinking along these lines gets some of the artifacts out of the way. Of course the magic 
could be taken to the extreme: just eliminate the camera altogether! But by leaving some 
elements in the equation, the potentially unnecessary technology pieces can be exposed. 
How about the cable? What if the camera could talk magically to the computer? 


This kind of thinking led to some recent products that allow users to upload photos auto- 
matically from their digital camera to their favorite photo site. The camera’s memory card 
actually contains a Wi-Fi connection, giving it direct access to a photo-upload service.” 


Turning back to our world, when we look at the multiple page Process Flows that lit- 
ter the Web, we find that a little magic could dispense with the artifact of the “page” in 
many places. Amazon’s shopping process illustrates this artifact. It provides a fairly typical 
multi-page experience when users add items to a cart (Figure 8-2). 
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Figure 8-2. Amazons multi-page “Add to Shopping Cart” process 


* Eye-Fi is an example of this. See http://www.eye.fi/overview/. 
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First, the user finds a book. Then when she adds it to her shopping cart, she is taken to a 
separate page. Getting back happens either through the back button or finding the “Con- 
tinue Shopping” button elsewhere on the page. Each book add is a heavy context switch 
to the second page. 


But what if we could apply some magic? Could we get away with having fewer page transi- 
tions? Could we eliminate the multi-page transition? 


Yes. It is possible to take flows like this and present them in a single interactive space. At 
other times, we can convert a multi-page experience into a single, long page. But some- 
times the process is best left broken into individual pages. In those cases we can often 
encapsulate the multiple pages into a simple Dialog Overlay, which effectively maintains 
the context while preserving distinct page-to-page flow. 


John Maeda, author of the book Laws of Simplicity (MIT Press), discusses the magic of 
hiding complexity: 


Hiding complexity through ingenious mechanical doors or tiny display screens is an 
overt form of deception. If the deceit feels less like malevolence, more like magic, then 
hidden complexities become more of a treat than a nuisance. 


In this chapter we will apply a little magic, hopefully get rid of the nuisance of page transi- 
tions where possible, and in the end treat the user to a better experience. Specifically, we 
will look at these Process Flow patterns: 


+ Interactive Single-Page Process 
e Inline Assistant Process 

e Configurator Process 

e Overlay Process 


e Static Single-Page Process 


Interactive Single-Page Process 


Consumer products come in a variety of shapes, sizes, textures, colors, etc. Online shop- 
pers will not only have to decide that they want shoes, but do they want blue suede shoes? 
And what size and width do they want them in? In the end the selection is constrained 
by the available inventory. As the user makes decisions, the set of choices gets more and 
more limited. 


This type of product selection is typically handled with a multi-page workflow. On one 
page, the user selects a shirt and its color and size. After submitting the choice, a new page 
is displayed. Only when the user arrives at this second page does he find out that the “true 
navy” shirt is not available in the medium size. 
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The Gap accomplishes this kind of product selection in a single page (Figure 8-3) us- 
ing Interactive Single-Page Process. The purple shirt is available in all sizes from XS to 
XXXL. Hovering over the dark blue shirt immediately discloses that this color is only 
available in XS and S sizes. 
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Figure 8-3. The Gap uses Interactive Single-Page Process to reflect the sizes for each product color 
choice in real time 


Considerations 


There are some issues to consider when using an Interactive Single-Page Process. 


Responsiveness 


The user's taste preference comes first. Either the color or the size can be chosen. If the 
item is out of stock for any color/size combination, it is displayed as unavailable (by show- 
ing the color or size as disabled). By placing this process in a few simple interactions, the 
user can quickly find something available to buy. With any online shopping experience, 
the potential for the user to bail out is a real concern. In-place interactions like this reduce 
these bailout moments. 


In Designing Interfaces (O'Reilly), Jenifer Tidwell uses the term Responsive Disclosure to 
describe this same pattern. According to Tidwell, Responsive Disclosure is good when: 


The user should be walked through a complex UI task step-by-step, perhaps because 
he is computer-naive, or because the task is novel or rarely done (as in a Wizard). But 
you don't want to force the user to go page-by-page at each step—your rather keep 
the whole interface on one single page.” 


* See http://www oreilly.com/catalog/97805 96008031 or page 123 in printed book. 
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Amazons interface for selecting a shirt also uses Interactive Single-Page Process with a 


slightly different interface (Figure 8-4). 
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Selecting sizes 


Sizes are shown in a drop-down 
menu. The sizes that are not avail- 
able for the selected color are 
disabled. 


Ifa disabled size is selected, the un- 
available colors will be displayed in 
a dimmed state. 


Selecting color 


The colors available for this size 
neck are clearly shown in the color 
selection palette. 


Unavailable 


If a combination that is unavail- 
able is selected, a clear warning is 
displayed and no links to purchase 
are made available. 


Figure 8-4. Amazon provides a similar experience to the Gap, utilizing Interactive Single-Page Process 
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The idea is the same: make the experience for selecting a product painless by providing 
inventory disclosures as quickly as possible, and doing it all in a single-page interface. 


Tip 
Interactive, single-page process flows improve user engagement and increase conver- 
sion rates. 


Keeping users engaged 
Broadmoor Hotel uses Interactive Single-Page Process for room reservations (Figure 
8-5). 
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Figure 8-5. Broadmoor Hotels provides a one-page interactive reservation system 


Each column represents what would normally be presented on a separate page. In the first 
column, a calendar discloses availability up front. This prevents scheduling errors. Select- 
ing the room from the second column updates both the room picture and the pricing. The 
pricing is reflected back on the calendar days (Figure 8-6) as well as in the third column 
where credit card and contact information is entered. 
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Figure 8-6. The Broadmoor calendar shows availability and pricing information 


Benefits 
Adobe calls out the Broadmoor one-page reservation interface in its Adobe Showcase.’ It 
states the benefits of this method: 


e Reduces entire reservation process to a single screen. 


e Reduces the number of screens in the online reservation process from five to one. 
Other online reservation applications average 5 to 10 screens. 


e Seventy-five percent of users choose OneScreen in favor of the HTML version. 
e Allows users to vary purchase parameters at will and immediately view results. 


e Reduces the time it takes to make a reservation from at least three minutes to less 
than one. 


Additionally, Adobe notes that conversion rates (users who make it through the reserva- 
tion process) are much higher with the Interactive Single-Page Process. 


Inline Assistant Process 


Another common place where multiple pages are used to complete a process is when add- 
ing items to a shopping cart. As mentioned earlier, Amazon provides the typical experi- 
ence (Figure 8-2). So what magic can we apply to move this from a multi-page experience 
to a single-page experience? Instead of thinking about the cart as a process, we can think 
about it as a real-world object. Given this mindset, the cart can be realized in the interface 
as an object and be made available on the page. The Gap employed an Inline Assistant 
Process pattern for its shopping cart when it re-launched its site a few years back (Figure 
8-7). 


* Other benefits are highlighted in the case study. See http://www.adobe.com/cfusion/showcase/index.cfm?event 
=casestudyprinte-casestudyid=2486. 
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Figure 8-7. The Gap’s single-page “Add to Bag” process 


Considerations 


There are some things to consider when using the Inline Assistant Process. 


Quick and easy 

The Gap integrates the shopping cart into its entire site as a drop-down shade. In fact, 
the Gap, Old Navy, Banana Republic, and PiperLime all share the same Inline Assistant 
Process-style shopping cart. The Gap is betting that making it quick and easy to add items 
to the cart across four stores will equal more sales. 


Additional step 


Amazon, on the other hand, is betting on its recommendation engine. By going to a sec- 
ond page, Amazon can display other shirts like the one added—as well as advertise the 
Amazon.com Visa card (Figure 8-8). 
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Figure 8-8. Amazon shows recommendations when confirming an add to its shopping cart 


Which is the better experience? The Gap seems to be the clear winner in pure user expe- 
rience. But which brings in more money? Its a question we cannot answer, but the right 
one for any site to ask. 


Tip 
Use a quick and easy approach to get users to finish a task. Use additional steps when 
there are opportunities to engage the user further (as with recommendations). 


Blending quick and easy with the additional step 


Is there a way to combine both the single-page experience and the recommendation expe- 
rience? This is what Netflix does when a user adds movies to his shipping queue (Figure 
8-9). 


Figure 8-9. Netflix displays its recommendations in an overlay 
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Each movie on the site has an “Add” button. Clicking “Add” immediately adds the movie 
to the user’s queue. As a confirmation and an opportunity for recommendations, a Dialog 
Overlay is displayed on top of the movie page. 


Just like Amazon, Netflix has a sophisticated recommendation engine. The bet is that 
since the user has expressed interest in an item (shirt or movie), the site can find other 
items similar to it to suggest. Amazon does this in a separate page. Netflix does it in an 
overlay that is easily dismissed by clicking anywhere outside the overlay (or by clicking 
the close button at the top or bottom). 


In a previous version of Netflix (or if JavaScript is disabled), this becomes a multiple-page 
experience (Figure 8-10). 


Figure 8-10. Without JavaScript enabled, you can see the original multi-page flow for the “Add to 
Queue” process on the Netflix site 


Each movie add leads to a separate recommendation page. Clicking on “Add” for a movie 
on a recommendation page takes the user to a secondary recommendation page. This 
process can continue, on and on. Eventually, the user has to hit the back button a num- 
ber of times to get back to the original context. In the Overlay example (Figure 8-9), the 
multi-page flow is encapsulated in the overlay and can be easily dismissed at any point, 
quickly returning the user to the originating page. 
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Best Practices for 
Interactive Single-Page Process and Inline Assistant Process 


Show previews in context. 


Dialog Overlay Process 


Here are some best practices to keep in mind: 


Use these patterns to simplify user flow. 
Use these patterns to improve conversion rates. 


Show invalid choices in real time. This informs users of the impact of their decisions. 
Show shopping carts inline where possible. 

Treat shopping carts as first-class interface elements and not just as an extra process. 
Show an additional step if recommendations are relevant and important. 


As mentioned before, any page switch is an interruption to the user’s mental flow. In addi- 
tion, any context switch is a chance for a user to leave the site. We seek an experience that 
has as little mental friction as possible. But sometimes the step-by-step flow is necessary. 


The Netflix approach just described (Figure 8-9) uses a Dialog Overlay Process to en- 
capsulate a multi-step flow inside a Dialog Overlay. We looked at Overlays in detail in 
Chapter 5. Overlays allow us to keep the context of the page yet present a virtual space to 


conduct a conversation with the user. 


Discover.com recently expanded its account section with a more detailed profile. The 
profile captures things like your payment date, mobile fraud alerts, paperless statements, 
and general contact information (Figure 8-11). The overlay pops up when you first enter 


your account. 
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Invitation to set up profile 


When entering an account, a Dialog 
Overlay is presented with an invitation to 
set up a profile. 


A Lightbox Effect is used to focus the 
user on the task of profile setup. The pleas- 
ing visuals add a level to the engagement 
factor. 
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Multiple steps 


Each step is presented is presented as a 
separate “page” within the overlay. 


Each “page” has a simple, clear call to 
action. 


Final step 


Filling out the contact information is left 

Chay. iara pa mane Bure yaw contant Fiona i pt Same until the end. If this step occurs too early in 

te the process, it might make the user think 
all the steps will be this involved. 


Figure 8-11. Discover encapsulates its “Create Your Profile” flow in a Dialog Overlay 


Considerations 


There are some issues to consider when using the Dialog Overlay Process. 


Making it feel lightweight 


The Lightbox Effect is nice because it focuses the user on the task. But what is smart 
about the flow is the first page is colorful and rendered in a simple, pleasing manner. The 
process looks like it might be simple and feels engaging. 


The in-between steps are usually a single action. There is a whole page dedicated just to 
selecting the due date for payments (Figure 8-12). 
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Wher area? you, ias D pay yas Dif 


Figure 8-12. Discover dedicates a complete “page” to just selecting when you would like to pay your bill 


Making the in-between steps clear and visually appealing with a single call to action 
makes the process feel lightweight. The last step is the biggest. By this time the user has 
committed to the process to some degree. Most of the user information is already filled in 
from the account, so the step does not feel too involved. But imagine if this step were first. 
It could cause users to more frequently bail out from the process, thinking that each step 
would be as involved as the first one. 


Clear status 


The other interesting touch in this example is providing an indication of the number 
of steps (Figure 8-13). There are any number of ways to indicate this information; the 
important thing is to give some indication of what the users are dealing with when they 
start. Usually three steps are ideal. In this case, there are five steps. But as we mentioned, 
the early steps are single actions. 


Figure 8-13. Discover uses the orange dot to indicate how far the users are in the process and gray dots 
to indicate what they have left 


Netflix probably has one of the simplest overlay flows. When a user purchases a previously 
viewed DVD, a one-page overlay appears. Since the only way for a user to get to this pur- 
chase dialog is by being a member, Netflix has all the information it needs (shipping and 
billing information, for example) to complete the purchase in a single step (Figure 8-14). 
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Confirm Purchase of Previously Viewed DVD 
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Figure 8-14. Netflix has a single-step purchase flow for previously viewed DVDs 


Best Practices for Dialog Overlay Process 


Here are some best practices to keep in mind: 
Use Dialog Overlay Process to make multiple steps appear in context of the page. 
Use Dialog Overlay Process to make the process feel lighter than moving to different 
pages. 
Use a Lightbox Effect to focus users on the workflow. 
Keep the users informed throughout of their location in the process. 


Configurator Process 


Sometimes a Process Flow is meant to invoke delight. In these cases, it is the engagement 
factor that becomes most important. This is true with various Configurator Process in- 
terfaces on the Web. We can see this especially at play with car configurators. Porsche 
provides a configurator that allows users to build their own Porsche (Figure 8-15). 
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Build your own Cayman S 
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Figure 8-15. Porsche’ car configurator provides an engaging way to customize a car 


Being able to tweak the colors, wheels, interior, and options for a car and see the results in 
real time is an engaging experience. In Chapter 14, we discuss Live Previews. Live Previews 
allow the user to see the effect of his changes on a simulated version of the real thing. 


Considerations 


There are some issues to consider when using a Configurator Process. 


Immediate feedback 

In the case of the Porsche site, when the user clicks on various body colors, the car is re- 
configured in the selected color and rendered in photorealistic shading. Most configura- 
tors allow a 360-degree view of the car as it is configured. 


Tip 
Use immediate feedback (Live Previews) to simulate real-world choices. 


Imagine if this was turned into a multi-page experience. Each panel would ask for the color, 
the wheel style, the interior material, dashboard configuration, and various other options. 
At the end, you would see your car. Not compelling? By making the experience engaging, 
users are more apt to experiment and fall in love with the car they have “designed” 
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It should be noted that the Porsche color configuration experience is actually part of a 
multi-page process flow. This highlights the fact that the decision between a single-page 
experience and a multi-page experience are not mutually exclusive. Single-page work- 
flows can live within a multi-page workflow. 


Out of view status 
Apple has a Configurator Process for purchasing a Macintosh computer (Figure 8-16). 
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Figure 8-16. Apple provides a one-page configurator for computer purchase 


There is a dynamic nature to this Configurator Process. As the user selects items to add 
to the computer, the price is dynamically updated using a Spotlight technique (discussed 
later in Chapter 11). In the upper-right corner of the page, the system configuration and 
price are highlighted to indicate updated information. The downside is that if this user is 
scrolled too far down, she car't see the update Spotlight since the summary panel is not 
visible. 
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Static Single-Page Process 


The Apple example illustrates another way to get rid of multiple pages in a Process Flow. 
Just put the complete flow on one page in a Static Single-Page Process. The user sees all 
the tasks needed to complete the full process. This can be both good and bad. Seeing just 
one step to complete the process can encourage users to finish the task. But if the single 
step seems too long or too confusing, the user will most likely bail out of the process early. 
In other words, if placing all the tasks on a single page is enough to cause the user to bail 
out, it is not a good idea. In the case of the Apple store, each item is optionally set, and it’s 
just a single click to include or exclude an item from the purchase. 


eBay provides two ways to sell an item. An introductory panel (Figure 8-17) gathers the 
description of the item for sale. The “Customize your listings...” option takes the user 


through a traditional multi-page process (Figure 8-18). 
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Figure 8-17. eBay’s simplified one-page flow 
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Figure 8-18. The customized flow is a traditional multi-page process 
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Since the customized flow contains many options for listing an item, it requires a good 
deal of handholding. A multi-page process fits well with guiding the user through a com- 
plex set of tasks. 


The other flow provided by eBay is a simplified Static Single-Page Process (Figure 8-19). 


ren ee ee ee eee G 


d 14 
Figure 8-19. eBay displays a simplified “Sell Your Item” as a Static Single-Page Process 
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Considerations 


There are some issues to keep in mind when using a Static Single-Page Process. 


Making it feel lightweight 

In this Static Single-Page Process, many options are defaulted and a simplified form is 
presented to the user. Multiple pages are compressed into a single page. Of course a long 
page like this can also be daunting. But eBay did a good job of getting the essentials into a 
single page. Each step is clearly called out with a clear border and a large step number. In 
addition, color is used to further simplify the steps. The two steps in green are about the 
item the user is selling. The last two steps in blue are about money. The color coding gives 
the impression there are only four steps total: item, photo, description, and pricing. 


Multiple pages are not necessarily evil 

The eBay example (Figures 8-16 through 8-18) illustrates that there is more than one way 
to deal with a step-by-step Process Flow. For a very complex flow, a Static Single-Page 
Process may work well. 


Sometimes it is good to break what could be a Static Single-Page Process into a multi- 
page process. Multiple pages can provide the natural chunking needed. They say “You are 
done with that step, now move onto the next.” Netflix has a problem-reporting interface 
that does just that. When reporting a scratched disc, clicking on the “DVD is damaged...” 
link takes the user to a secondary page (Figure 8-20). 
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Figure 8-20. Netflix provides a multi-page approach to reporting disc problems 


Why is it good to have a multi-page process in this case? Confirmation is a critical step in 
the process. The user needs a place to focus just on reporting a problem. Suggestions can 
be provided here without the context of all the other possible problems. 


Best Practices for Static Single-Page Process 


Here are some best practices to keep in mind: 
Use a multi-page process when the process is complex. 


Use a multi-page process when you want to hide the previous context (and the next) and 
bring the focus to a single task in the steps. 


Use a Static Single-Page Process when you only have a few steps and want to avoid tak- 
ing the chance that a user will quit while moving from page to page. 


Use visual treatments to make the number of steps seem fewer. 
Provide clues as to where the user is and how much is left in a multi-step operation. 
Gather as many defaults as possible to simplify a flow. 


Use engagement, color visuals, interactivity, and simple visual styles to make the steps 
seem fewer. 


Put lightweight tasks up front in a multi-step operation. 
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Principle Four = 
Provide an Invitation 


= 


2 
Á 
Recently I had the chance to travel to Germany. It had been over 15 years since my last 
trip, so one of the things on my agenda was to take some time and tour by car. Not want- 


ing to figure out local maps or ask for directions, I requested a car with a GPS navigational 
system. 


The system turned out to be dead simple. However, at first I was disappointed: it did 
not contain a street map view. Instead it displayed a simplified set of arrows indicating 
the correct turn and audible instructions just when I needed it. But the system worked 
perfectly. I found the experience delightful. Instead of trying to look at an in-dash map, I 
simply let it tell me what to do next. It provided just the right amount of directions with- 
out taking away my travel experience. 


One reason I needed these just-in-time cues was due to lack of familiarity with the streets 
of Germany. Being in an environment with different cultural conventions (not the least 
of which was the language barrier) added to its total necessity. If I moved to Germany, 
learned the language, and used the roads on a daily basis, then my dependence on the GPS 
would diminish. 


We need a similar experience for our web applications. 


An Invitation 


In earlier chapters we discussed Drag and Drop, Inline Editing, and Contextual Tools, as 
well as other patterns of interaction. A common problem with many of these rich interac- 
tions is their lack of discoverability. 


Let's look again at the way Flickr introduces the ability to edit a photo description (Figure 
P4-1). Just below each photo is a description area. This area can be edited directly. But 
how does the user know the area is editable? In the first panel of Figure P4-1 there is no 
cue or invitation telling users that they can edit the photo description. But notice in the 
second panel—when users hover their mouse over the description area, a cue to edit 
appears. 
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Figure P4-1. Flickr provides an invitation to edit the photo description 


The background of the editable areas becomes highlighted in light yellow. A tool tip 
appears, cueing the user to “Click to edit” If users follow these cues to the next level of 
interaction (from mouse hover to mouse click), they will be able to edit the photo descrip- 
tion directly. 


Invitations are the prompts and cues that lead users through an interaction. They often 
include just-in-time tips or visual affordances that hint at what will happen next in the 
interface. 


Providing an invitation to the user is one of the keys to successful interactive interfaces. 


In the Flickr example, the designers chose to reveal the feature during mouse hover. This 
Invitation is revealed just in time, when the mouse is paused over the editable area. The 
downside is that the feature is not visible when the mouse is not over the area. The other 
choice is to make the Invitation visible at all times. There is an obvious tension between the 
two styles of invitations, static and dynamic, which we explore in the next two chapters: 


Chapter 9, Static Invitations 
These are invitations that are offered on the page using visual techniques to invite 
interaction. 


Chapter 10, Dynamic Invitations 
These invitations come into play in response to what and where the user is interacting. 
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Chapter 9 
Static Invitations 


By providing cues for interaction directly on the page we can statically indicate to the 
user the expected interface behavior. Static Invitations provide cues directly on the page. 
There are two broad patterns of Static Invitations: 


Call to Action Invitation 
Invite users to primary task or tasks. 


Tour Invitation 
Invite users to explore new features. 


Call to Action Invitation 


Both Yahoo! Answers and Discover card provide a simple 1-2-3 step explanation of their 
site (Figure 9-1). These clear steps provide a Call to Action Invitation. For Yahoo! the 
individual calls to action are ask, answer, or discover. 
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Figure 9-1. Yahoo! Answers and Discover Card use a clear 1-2-3 set of call to action invitations 
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Call to Action Invitations are generally provided as static instructions on the page. But 
visually they can be provided in many different ways (Figure 9-2). 


RI rr fice) Flickr Organizr 


Inthe Organizr, the user can drag items from 
a photo set to a work area. When the work 
area is empty, the area serves as a Call to Ac- 
tion for dragging items to edit. 


Yahoo! Movies “Rating” widget 
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Netflix “Rate Your Recent Return” 


Rate Your Recent Return A top banner invites the Netflix user to rate 


recent returns. A clear Call to Action to rate 
is important because ratings information is 
central to the underlying recommendation 
engine. 


Yahoo! Hot Jobs Call to Action button 


City & State or ZIP The “Search Jobs” button is indicated with 
a larger-than-normal button, a bright color, 
and clear typography. 
Idea Bob Vote Now 
Like this idea? 
Vote for it now Idea Bob has an extremely clear Call to Ac- 
tion: “Vote for it now” 


Figure 9-2. Textual invitation, interactive ratings, and Call to Action buttons are different ways to 
create Call to Action Invitations 
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Considerations 


There are some issues to keep in mind when using a Call to Action Invitation. 


Visual noise 


The problem of course with a Call to Action Invitation is that it competes with every- 
thing else on the page. Thinking through what actions you want to call out on a page 
(before any interaction) is a healthy design exercise that brings clarity to both visual and 
information hierarchy on the page. 


Tip 
Use a Call to Action Invitation for a primary action or to call out main 1-2-3 steps. 


Like.com is a site for finding items that are similar to other items. Users can shop for 
similar colors, shapes, and patterns. Given a particular kind of watch, the users can draw a 
box around some physical feature they really like about it. Like.com will then find similar 
watches that match the characteristics that were highlighted. For example, highlighting 
the chronograph face will find more chronograph-style watches (Figure 9-3). 


Since this feature is unique, a Call to Action Invitation is placed just above the watch. 
Titled "Refine by Visual Detail”, it contains a Static Invitation that says "Draw a box on 
the item to focus your search on that area.” 
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Figure 9-3. Like.com allows users to highlight what they like visually about a product; it will then 
return items visually similar: the black watch matched the face style highlighted 


As with any Static Invitation, the question is: does it get lost on the page? The additional 
graphic that represents a mouse dragging a box adds some visual contrast to grab the user’s 
attention. In situations like this, only user-testing can verify whether users get it or not. 
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Blank Slate Invitation 


Another type of Call to Action Invitation is a Blank Slate Invitation. 37 Signals utilizes 
this in its Backpackit application (Figure 9-4). 


Add a List Note Writeboard Divider or add Tags 


My Own Page 


Use these links to fill your page. Need inspiration or a tutorial? 


Figure 9-4. Backpackit uses a blank page to invite the user to start adding content 


It’s a simple idea: starting with a blank slate invites the user to fill it in. Recycling what 
would normally be a blank area to provide clues on how to personalize it is a great way to 
entice users to create content. The use of the arrow is a nice touch as it allows the user to 
read the page as normal, but visually ties the invitation back to the toolbar above. 


— Tip 


Recycle blank areas with invitations to interact. 


Unfinished invitation 


Yahoo! has a security feature that helps users confirm that they are indeed logging in to 
the official site (and not a spoof site). The setup is simple. Provide an image associated 
with the login page, an image known by only the user and Yahoo!. When users are on the 
official site, they will see the image uploaded for the login page. 


Tip 


Leave an area unfinished to invite the user to complete a task. 


The Login team has gone through a couple of iterations on how to cue the user to add a 
sign-in seal. You can see these two approaches in Figure 9-5. The first renders the corner 
of the login area as a page turned down. The idea is that something appears out of place, 
which draws the user to interact with the security feature. We can only speculate, but 
given the latest revision to the invitation it appears that the first design did not work as 
well as expected (Figure 9-5, left). In the second iteration, messaging, visual style, color, 
and proximity have all been combined to create a clear invitation (Figure 9-5, right). 
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Figure 9-5. Yahoo! Login provides a Call to Action Invitation to add a sign-in seal: the first version 
(left) used a dog-ear graphic to get the user's attention; later versions (right) used a rectangular area 
with a different color background 


Best Practices for Call to Action Invitation 


Here are some best practices to keep in mind: 
- Use Call to Action Invitations for a single primary action. 
- Use Call to Action Invitations for a simple 1-2-3 call to action. 


- Make Call to Action areas visually stimulating to get the user's attention. Avoid compet- 
ing visual clutter. 


- Use empty areas as opportunities to call the user to action. 


- Use partially completed areas as a way to call users to action. Human nature will lead them 
o want to “fix” it. 


Tour Invitation 


Closely related to Call to Action Invitations are Tour Invitations. The situation: you have 
a newly redesigned site or a whole range of new features. How do you invite the user to 
interact with the new site correctly and discover these new features? 


When Yahoo! Maps went through a major interface change they included an Tour Invita- 
tion (Figure 9-6). Tours are a great way to introduce new features. 
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GET TO KNOW THE NEW YAHOO! MAPS 


Invitation to take tour 


A drop-down shade partially ob- 
scures the map. It has a slight 
transparency to reveal the map 
underneath. It provides a Call to 
Action button (“Take Tour”) and 
the four parts to the tour. 


Animated transitions 


Each step is animated into place 
and slides slightly up and to the 
right. 


This extra animation is intended to 
get the user's attention. 


Tour steps 


Once the tour starts, the shade 
slides out of the way and an overlay 
describes a specific feature. 


Taking the next step 


The overlay provides familiar play, 
rewind, and forward video-style 
controls to navigate the tour. Click- 
ing the “Next” button leads the user 
to the next tour step. 
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feature item. It also provides a clear 
call to action (though more sub- 
dued) to exit the tour and return to 
Yahoo! Maps. 


Figure 9-6. Yahoo! Maps provides a Tour Invitation for its features; the tour provides a way to invite 
users to interact with new features 


Considerations 


While tours can be a nice way to explain design changes to a web application, they are too 
heavy-handed for showing features at the moment the user interacts with them. And they 
run the risk of not being used since they are optional to the user’s flow. 


Not a Band-Aid 


Be careful. It is tempting to use tours as a Band-Aid for a poor interface. If users dont 
get it, then creating more instructional text and providing tours will not solve the real 
problems an interface may have during interaction. But coupled with a well-designed 
interface, a tour can be just what is needed for users to get started. 


Tip 
Tours don't make a difficult site easy to use. 


The key to tours is keeping them simple, easy to start, and easy to stop. A tour should just 
illustrate the live site. Going into a “tutorial” mode separate from the site rarely works. 


Keep it simple 

When Yahoo! changed its home page in 2006, it launched a way to tour the live interface 
with a Dialog Overlay (Figure 9-7). The overlay provides a three-step interface: “Search 
Smarter’, “Find it Faster’, and “Get Personal”. Each step highlights a different part of the 


interface with a bubble callout explaining the feature (Yahoo! calls this a “Feature Cue”). 
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Figure 9-7. The redesigned Yahoo! home page included a tour interface at launch; the tour provided a 
nice way to invite users to use the main features of the site 


Simple visual techniques like dimming the page and highlighting the key areas works 
well. Using a Lightbox Effect (discussed more thoroughly in Chapter 11) to highlight 
features and clearly explaining them are great techniques for keeping tours simple. 


Introducing new idioms 


Like.com introduces its key features in a large area at the top of the home page: “Detail 
Search’, “Color Match’, “Shape Match’, and “Pattern Match” (Figure 9-8). Each has a post- 
card that explains the concept graphically. Each concept is automatically rotated through. 
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Figure 9-8. Like.com displays its four key features (“Detail Search’, “Color Match”, “Shape Match’, and 
“Pattern Match”) in a large section at the top of the page; each feature is displayed in rotation 
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While visually stunning, there are a few issues with this approach: 


e Users tend to view visually treated areas at the top of a page as an advertisement. In 
tests of several products that employed this type of site introduction, users failed to 
even notice the area. 


e Since the tour is completely disconnected from the site, it is harder for users to map 
these feature descriptions to the actual site. 


However, Like.com is trying to introduce completely new idioms. Creating a nice visual, 
bold explanation does a very good job of making these features easy to discover and in- 
teract with. The real key is that the features are easy to use in the site. The tour becomes 
secondary and as such may overcome the limitations noted. 


Best Practices for Tour Invitation 


Here are some best practices to keep in mind: 
Use Tour Invitations when you have a newly redesigned site or are launching a new site 
and need to take the user through a series of features. 
Integrate Tour Invitations with the live site as much as possible. 
Make Tour Invitations short and sweet, easy to exit, and clear to restart. 
Don't depend on tours to fix interface issues. 
Keep tours simple. 
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Chapter 10 
Dynamic Invitations 


Static Invitations are useful for cueing the user about what the interface has to offer. 
However, it is a fact established by many independent tests that users often dor't read in- 
structional text. A good way to get the users’ attention is to provide invitations to interact 
at the moment when they need it. Dynamic Invitations engage users at the point of the 
interaction and guide them through the next step of interaction. 


There are several ways to engage the user with a Dynamic Invitation: 


Hover Invitation 
During mouse hover. 


Affordance Invitation 
Using the familiar as a bridge to the new. 


Drag and Drop Invitation 
For drag and drop. 


Inference Invitation 
During interaction. 


More Content Invitation 
For revealing more content. 


Hover Invitation 


One way to engage the user is by using the mouse hover to show a Hover Invitation. 


The Gap uses the mouse hover event to invite its shoppers to take a more detailed look at 
an item (Figure 10-1). 
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Standard Fit 


e 


Non-hover state 


the mouse is not over them. 


Standard Fit 


Hover over item 


Standard Fit 


Hover over the button 


and available for interaction. 


Figure 10-1. The Gap provides a nice “Quick Look” feature that is exposed as a Hover Invitation 


Considerations 


There are some issues to keep in mind when using a Hover Invitation. 


Visual cues 


The button revealed uses inviting language. The term “Quick Look” makes it seem quick 
and easy. The button also looks like a button. The affordance of a button is clear; buttons 
have a clear connection with providing an action. It says to the user "click me” without 
saying it directly. The button also visually contrasts with the item hovered over. Finally, 


the proximity of the invitation clarifies which item can be inspected. 
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The Gap displays items as normal when 


A "Quick Look” button is displayed when 
the mouse hovers over the pair of slacks. 


The button flattens out to indicate it is alive 
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Another nice touch is that the button changes visual depth when the mouse hovers over 
it. This detail hints that the button can be clicked. It gives a signal to what the next level of 
interaction should be—clicking the button. It provides a Hover Invitation. 


Notice also that this employs the best practice we discussed in the last chapter: using fa- 
miliar idioms to bridge the gap to new interactions. 


Interactive versus static 


Like.com takes a different approach. For every product, it displays a “Visual Search” but- 
ton. Instead of revealing the invitation on hover, it uses a Static Invitation (Call to Ac- 
tion). Is this the right approach? 


Like.com has a very different model for search. Most likely in the interest of exposing this 
feature, it chose to show the button at all times on all products (Figure 10-2). This strat- 
egy does have a downside, though. It makes the page elements compete with the product. 
Each button becomes a “visual speed bump.” And by having buttons everywhere, they 
run the risk of the actions not being seen at all. If Like.com chose to reveal the button on 
hover, it might actually be more effective at grabbing the user’s attention. 


Welcome! Click vaus asan 
gamm 
i 
Te | H i 
VIUdML a SLAEN Vise & SEARCH VISUAL e SEARCH vau esan vaat « staen 


Figure 10-2. Like.com chose to display the “Visual Search” button at all times, most likely because it is a 
key feature on the site 


The tension between revealing a feature statically on the page versus more subtly during in- 
teraction is based on how primary the action is, and is best resolved through user testing. 


Netflix uses Static Invitations to reveal star ratings and the “Add” button for every movie 
shown on the page (Figure 10-3). As with Like.com, this setup has the negative effect of 
making the page visually heavier. But as with Like.com, priority is clearly placed on the 
exposed features. 
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Figure 10-3. Netflix shows the “Add” button and star rating statically on the page; both adding movies 
to the queue and rating them are important to the user's experience with the service 


Both Like.com and Netflix have specific reasons that drove them to not use a Hover In- 
vitation to reveal these actions but instead to use the Call to Action Invitation. An egre- 
gious example can be contrived by changing the design of Backpackit to show all of its 
in-context tools at the same time (Figure 10-4). 


Pick Up at the Store 

ft ii: f Chips 
$ idt [ Orange Juice? 
eis I Milk 
È ii: TT Bread 
tit [ Tomatoes 
eis TT Lettuce 

Aggitem Reorder 


Figure 10-4. A portrayal of what Backpackit would look like if it displayed all actions at once (this is 
not the approach Backpackit took) 
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This setup would not work at all as it is so visually dense it distracts from the to-do list 
itself. Looking at this extreme example helps us to evaluate the tension between being 
visually explicit and interactively subtle: 


e Choose being visually explicit if your actions are key actions and you can do it in such 
a way as to not be too visually dense. 


e Choose being interactively subtle whenever possible if the actions are secondary to 
the content and the primary goal is readability and visual simplicity. 


Enhancing Hover Invitation 


There are several ways you can enhance a Hover Invitation (see Figures 10-5 and 10-6): 
e Highlight the background of the hovered area (Flickr’s yellow background). 


e Use a tool tip to describe the action that will happen on click (Flickr’s “Click to edit” 
tool tip). 


e Change the cursor to reflect the operation (Flickr's insertion cursor). 


e Provide an in-context preview for the action (Yahoo! Movies rating widget). 


Park near our new home 
d Click to edit be 


Figure 10-5. Flickr highlights the background, displays a tool tip, and changes the cursor to invite the 


user to edit 


Figure 10-6. Yahoo! Movies previews what the rating will look like after it gets chosen 


Previewing what effect the action will have is a really nice way to invite the user to engage 
with a feature. Yahoo! Movies does this by showing the grade in the left pane as it will ap- 
pear after the grade is chosen (Figure 10-6). LandsEnd.com does just the opposite. When 
the user hovers over a color swatch, the slacks do not change color; only after a click does 
this happen. The downside is that the user can’t just quickly roll over the swatches and 
see what each looks like. Additionally, the user only knows if a color is unavailable after 
clicking on the color swatch (Figure 10-7). 
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Figure 10-7. LandsEnd.com does not show colors on hover; only on click will the color be shown 


Best Practices for Hover Invitation 


Here are some best practices to keep in mind: 

Use Hover Invitations when the actions are secondary to content and you want to keep 
he visual style uncluttered. 

For Hover Invitations, use cursor change, background change, and tool tips to clearly 
indicate the invited action. 

During Hover Invitations, try to preview what the change will be if the user clicks. 
Sprinkle familiar idioms throughout the various stages of an interaction. Bridging the new 
with the old will make the new become familiar more quickly. The most common idioms 
o use are buttons, links, drop-down arrows, and familiar icons. 


Use proximity to clarify what an invitation is referring to. Changing the cursor while over 
an object indicates that the invitation applies to the object being hovered over. 


Affordance Invitation 


In his book The Design of Everyday Things (Basic Books), Donald Norman applied the 
term affordance to design. The original use of the term goes back to J. J. Gibson, a per- 
ceptual psychologist. Gibson used the term to describe the actionable properties of an 
object. The classic example is that of a doorknob. To humans the affordance provided is 
the ability to grasp, turn, or pull the handle. In Gibson’s view the property did not have to 
be visible, it just needed to be something the actor (human or animal) perceived as a way 
to interact with the object. Norman used this term to describe the idea of a perceived af- 
fordance for a user interface element. He hastened to add that the perceived affordance on 
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screen elements does not have physical properties, but on some level users will perceive 
that they can interact with them largely due to convention, terminology, metaphor, and 
consistency.” 


Considerations 


There are some issues to consider when using an Affordance Invitation. 


Bridging the new with the familiar 


An Affordance Invitation plays off of the familiar to provide an invitation to inter- 
act. It works since following understood conventions helps introduce new interaction 
techniques. By bridging new interaction styles with familiar idioms, the user can be led 
through a sequence of interactions. 


Flickr allows users to perform a number of actions with other Flickr users. Anywhere a 
user’s picture is displayed, a set of actions is revealed on mouse hover. The familiar idea 
of a drop-down arrow (normally leading to a set of choices or a menu) invites the user to 
click to see the available actions (Figure 10-8). 


a Non-hover state 
Ey A user's photo is displayed in a visually non-cluttered style. Just the 
picture, not interface tools, is visible. 


Hover state 


EFN 

E) When the mouse enters the photo, an additional interface element 
(a drop-down arrow) is revealed. The photo gets treated with visual 
depth: this creates an affordance that this is an interface control and 
not just content. 


Arrow hover state 


2 
jel 


When the mouse enters the drop-down arrow, additional highlighting 
(arrow background inverts to blue) is revealed. Again, this reinforces 
visually that this is indeed a button. Buttons are familiar idioms. 


* For a fuller discussion of the nuance between an affordance and a perceived affordance, see http://www. 
interaction-design.org/encyclopedia/affordances.html. 
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ie R Drop-down activated 

ED) Action menu is revealed. The arrow flips upside down, indicating that 
lantzilia is a friend. Change | clicking on it will collapse the menu. The menu itself is a common 
Photos idiom inviting user interaction. 

Profile 

Tags 

Archives 

Favorites 

Contacts 

Send FlickrMalil 


Figure 10-8. Flickr employs the familiar drop-down affordance when the user hovers over another 
Flickr user's profile picture; clicking the drop-down reveals a menu of actions 


Tip 


Bridge new interactions with familiar idioms. 


Multiple idioms 


During this interaction sequence, several idioms are revealed. Each revealed idiom is fa- 
miliar and naturally leads the user to the next level of interaction. In the Flickr example 
the Contextual Tool for contacts has these affordance attributes: 


Looks like a button 
When the user hovers over a photo, it gets a visual depth treatment that looks like a 
button. 


Has a drop-down arrow 
A drop-down arrow is part of the visual button treatment. It is slightly separated (by 
whitespace) to emphasize that it has a specific function. 


Provides a drop-down menu 
When the menu is revealed, it is an obvious idiom that the user knows how to interact 
with. 


Inverts the arrow 
The drop-down arrow is flipped upside down to indicate that the menu can be closed. 
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At each step in the interaction, a familiar idiom is revealed. Each tugs the user forward 
into the interaction. 


Another common idiom used throughout the Web is the hyperlink. It clearly indicates a 
possible “click” (Figure 10-9). 


Pick Up at the Store 
fy. I Milk 
Orange juice 
FT" Tomatoes 
Lettuce 
~ Bread 


Figure 10-9. Backpackit uses the familiar idioms hyperlink and trashcan to indicate each tools purpose 
(edit and delete) 


Recall from our earlier examples of Backpackit that hovering over a to-do item reveals 
contextual tools. The “Edit” tool is represented as a hyperlink. The interaction is fairly 
obvious. Clicking the link will do something. The link is labeled “Edit” so it should edit 
something. Because it is revealed when the mouse is over the “Milk” item and the “Edit” 
link is placed in proximity to it, we can assume it will edit the “Milk” item. 


Perceived affordance 


The other tool revealed is a trashcan icon. Again, most users are familiar with the trash- 
can icon idiom. It has been in use since the early 1980s, and was popularized by the 
Apple Macintosh. It is fairly obvious that clicking the trashcan will delete “Milk” from our 
to-do list. 


While dynamically revealing contextual tools might initially be unexpected, the use of 
these Affordance Invitations serves as a bridge to invite the user to understand how to 
complete a task. 


Best Practices for Affordance Invitation 


Here are some best practices to keep in mind: 
Bridge new, unfamiliar interactions with classic, familiar idioms (e.g., revealing a hyperlink 
for an action on Contextual Tools). 


Use perceived affordances to cue an invitation (e.g. an arrow that points down before 
drop-down, then up to cue that the arrow will close the menu). 


Place Invitations in context, in proximity to the interaction. 
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Drag and Drop Invitation 


When we discussed drag and drop in Chapter 2 we stressed the challenge of getting the 
interaction right. There are more than a dozen interesting moments of interaction in any 
drag and drop interaction (see Figure 2-2). Many of these moments are opportunities to 
provide Drag and Drop Invitations. 


The Events 


In Chapter 2, we listed 15 different events that are available to the designer to cue the user 
during a drag and drop interaction. Here are the 15 drag and drop events we listed in that 
chapter: 


e Page Load 

e Mouse Hover 

e Mouse Down 

«+ Drag Initiated 

«+ Drag Leaves Original Location 

«+ Drag Re-Enters Original Location 
e Drag Enters Valid Target 

+ Drag Exits Valid Target 

«+ Drag Enters Specific Invalid Target 
«+ Drag Is Over No Specific Target 

«+ Drag Hovers Over Valid Target 

«+ Drag Hovers Over Invalid Target 
« Drop Accepted 

« Drop Rejected 

+ Drop on Parent Container 


As with any complex interaction, it is key to guide the user through each step. Given this 
many interactions, it’s important to show invitations at key moments. 


While at Yahoo!, I (Bill) worked on the Yahoo! for Teachers product. A key feature is 
the Yahoo! Gobbler™, which allows teachers to grab text clippings, images, and links from 
pages around the Web and “gobble” them back to their classroom projects (Figure 10-10). 
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Non-drag state 


The Yahoo! Gobbler allows teachers to grab elements from 
the page (images, text clippings, links) and drag them into 
the Gobbler tool. Items dropped into projects in the Gob- 
bler are saved automatically to the Yahoo! for Teachers port- 
folio of projects. 


Hover over draggable object 


To indicate that an image can be dragged from the page, 
an orange border highlight and a selection color tint is ap- 
plied to the image. This indicates to the users that the im- 
age is draggable and invites them to initiate a drag. 


Drag initiated 


Once the drag is initiated, a small thumbnail representation 
can be dragged around. 


There is an additional opportunity missed for an invitation, 
however. When drag is initiated, all of the valid drop objects 
could be lightly highlighted. This would indicate to the user 
where it is valid to drag items. 
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Drag over valid drop target 


When the mouse is hovering over a project, its background 
changes to white to indicate that it is active and available 
as a drop target. 


ewan at a srw kecation 
hr black sand beach or pale 
D m tall As waves eplaeh 


be bava, va please rary 
hi Sre bours of a nre aoan 
hew up chee lave eccening 


Dropped object 


Once dropped, the object replaces the previous item 
displayed. 


ewan at a new keaton 

|x black sand beach ox «pelle 
D mm tall. As waves spå 
msta of Oe malten 

lites sane sesal! glassy 
farer chee nat becuse 
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jew up chee lave eemering 


Figure 10-10. Yahoo! for Teachers Gobbler uses several invitations during a drag and drop interaction 


Considerations 


The challenge is how to indicate that items on the page are draggable and what to do 
with them once they are dragged. The interaction is made clear by highlighting draggable 
items on hover, indicating where something has been ripped from, showing a miniature 
version of the clipping (as it would be represented once saved), and highlighting the proj- 
ect that is ready to receive the clipping. 


Thinking through each of these microstates in an interaction is really a navigation problem. 
How do we subtly prompt the user about what to do next? This is the power of invitational 
design when intertwined with the interaction. A common mistake is to provide drag and 
drop with little or no cues during operation. This leads to confusion. 
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Invitation to drag 


For any drag to work, there needs to be a way to indicate draggability. In the prior ex- 
amples the only indication that something was draggable was the cursor change on mouse 
hover. In observing user-testing, the step of providing the cursor change is a key way users 
can find out whether something is draggable. The cursor change is subtle and seems to 
only cue users who know the page allows drag and drop. The continued challenge is to make 
drag and drop discoverable for users not expecting it. 


In the same round of testing we experimented with various styles for module headings 
to indicate a “grip” area. Surprisingly this seemed to have a negligible effect. 


The key element to indicating draggability is answering the question, where do you grab to 
drag a module? In iGoogle (Figure 10-11), the title contains a link to the modules origin as 
well as three controls (menu drop-down, collapse, and remove). That leaves a small space 
(or in some cases almost no space) for grabbing the module for drag and drop. It also 
means a smaller space to see the cursor change and allow the feature to be discovered. 


HowStuffWorks: Daily Stuff Feet") 


Figure 10-11. In iGoogle the area users can grab a module for dragging is sometimes very small if the 
title is long; the drag area is between the word “Feed” and the menu drop-down arrow 


One solution would be to reserve an always-visible grab texture on the lefthand side of the 
header (Figure 10-12). 


HowStuffWorks: Daily Stuff Feed 


Figure 10-12. Adding a drag control to the left of the header for modules would provide a discoverable 
and standard way to drag each module 


The grab area plays on users’ spatial memory: it indicates that they should always go here 
to start dragging. Coupled with the cursor change indicating draggability, the grab area 
creates a complete invitation for drag. 


It's OK to be extremely explicit. Concept Share does this for associating a concept with an 
image the user has added to a concept workspace. Saying “Drag me” is a clear invitation 
to drag (Figure 10-13)! 
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“Drag me” 


A comment can be associated 
with a specific part of an image 
by dragging a connection line to 
the image. 


To make it explicit, the top-right 
corner of the comment box says 
“Drag me". 


“Reset Pointer” 


Once the connector is dragged 
from the comment box to the 
image, the “Drag me” changes to 
say “Reset Pointer”. 


Figure 10-13. Concept Share explicitly invites the user to “Drag me” in order to tie comments to a part 
of the image 


Google Maps recently added a feature that allows users to change driving directions by 
dragging the displayed route to connect through different roads (Figure 10-14). A con- 
nector object (represented as a circle) provides a tangible object to drag. Changing the 
cursor indicates draggability. The tool tip states plainly “Drag to change route”. Since the 
route actually changes dynamically as the user drags it, the effect of dragging is immedi- 
ately reinforced: changing the route on-the-fly. 
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Figure 10-14. Google Maps displays a draggable circle, DER the cursor, and displays a tool tip 


Advertising drag and drop 
When drag and drop is used to start an action (delete, upload, copy, and so on), the drop 
target can often advertise its ability to accept a dropped item. 


In Flickr's Organizr the workspace area is initially blank. The workspace area is recycled 
to invite drag and drop (Figure 10-15). 


m| 


Al your content 


D Batch Organize Sets & Collections Groups Map 


Eat patos = Permasona - 


1,200 toms :: 0 selected | Detect af 


Het fp = 
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Drag things here to edit them as a batch. 


You can then change any attributes or create a new set. 


Your photosveam Flickr 


[BESET ? More options > Jump to date 
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=j ml 


> 


H 


Figure 10-15. Flickr’s Organizr provides a place to move photos that users wish to perform actions on; 
a typical action involves adding them to a set 
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Yahoo! Photos had a nice upload feature that allowed direct drag and drop from the user’s 
desktop into the upload page. Since this is new functionality that is not typically supported 
by browsers, the designers chose to prominently advertise drag and drop. The invitation 
to drop photos the easy way was placed in the spot where photos could be dropped. Using 
a stylized arrow and image to illustrate the procedure helped to make the feature clear 
(Figure 10-16). Both examples use the Blank Slate Invitation (discussed in Chapter 9). 


Add Photos 


Select photos on your computer to upload to Yahoo! Photos. 


Step 1. Add photos to:| All My Yahoo! Photos | [whats this? 
step 2. EET 
Photo Name Size Actions 


ja 


Drag and drop photos here or click 
Select photos...” above. 


O Photos (0 MB total) 


ciei | [rs = o a] 
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Figure 10-16. Yahoo! Photos provided an easy upload feature through drag and drop, and advertised it 
prominently 


This only works if the message is clear and simple. The Flickr invitation has other instruc- 
tions that may detract from the main message. In Yahoo! Photos there are two ways to 
upload: the select and upload model and the drag and drop model. To avoid confusion 
between the two models, the drop text reads “Drag and drop photos here or click ‘Select 
photos... above.” One slight improvement would have been to place each choice on a line 
by itself and make the “or” all-caps (Figure 10-17). 


Drag and drop photos here OR 
click “Select photos...” above. 


Figure 10-17. Slightly altered messaging to make the two upload interactions more explicit 
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Invitation to drop 


Another place that invitations can happen is during the drag. If there is a single drop tar- 
get, you can repurpose the area by changing the messaging there to indicate this is where 
to drop. 


In the Flickr Organizr tool (Figure 10-18), once dragging starts, the bottom pane (con- 
taining all the photos) gets overlaid with a message "Drop a photo here to remove it from 
the batch” This is a straightforward way to invite the user to take the next step. At a more 
general design level, there are other possible ways to remove a photo from the work batch 
area. One would be to provide a small [X] next to the photo on hover, allowing the user to 
click to remove it from the temporary area. Dragging is consistent here since it was used 
to place it in the area to begin with. 


© 1 photo was added to the batch! 


Drop a photo here to remove it from the batch 


Figure 10-18. Flickr contains a slightly confusing drop invitation: users have to drag the photos from 
the temporary work area (batch) to their set of photos in order to “remove” them 


The problem with temporary areas like this is that users can often be confused about what 
it means to remove the items after they are done working with them. What is odd about 
this is having to use drag and drop to “remove” the item from the batch by dragging it 
back into the photo area (when in reality it was not actually removed). Flickr completes 
this action by showing an animated nuclear explosion. This seems to indicate the photo 
has been “nuked,” when in reality it is just no longer in the temporary area. 


An alternate approach is to have a set of actions that only work on objects that are directly 
selected (see Chapter 3). This removes the need for drag and drop to simulate selection. 


The more common use for drop invitations is like the one used by Yahoo! Mail (Figure 
10-19). When dragging a mail message to folders, the dragged message representation 
contains a drop status icon indicating what will happen on drop. 
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Figure 10-19. Yahoo! Mail provides drop invitations embedded with the drag object 


Green is used to indicate a valid drop target; red indicates invalid. The “check” indicates 
that the message can be moved here. The “banned” icon indicates that the item will not be 
dropped here. The “plus” icon is a special case. Dragging a message to the Contacts folder 
will add the sender to the contact list. 


Best Practices for Drag and Drop Invitation 


Here are some best practices to keep in mind: 


During drag and drop, use as many moments as possible to keep the user engaged 
through subtle invitations. 

Provide a cursor change over draggable areas. 

Provide an unambiguous space to grab items for dragging. 


Download at WoweBook.Com 


Inference Invitation 209 


Inference Invitation 


Another challenge to providing invitations is not over-anticipating the user’s intent. When 
you couple the different actions a user may perform with the fact that you cannot always 
know what the user is going to do next, you find the problem much more difficult than 
you first imagined. 


What you don't want to end up with is the infamous Clippy, Microsoft Office’s attempt to 
determine what the user wanted to do next. Clippy was overaggressive with its sugges- 
tions as well as visually distracting (and annoying). It was eventually removed from the 
product suite." 


— Tip 
Use visual inferences during interaction to cue users as to what the system has inferred 
about their intent. 


For a counterexample, Google Sketchup does a really nice job of inferring user intent. 
When the user is drawing 3D objects, the interface provides cues (called Inference Invita- 
tions) as he moves his mouse around (Figure 10-20). 


[Enders] || [Mispa] 


Figure 10-20. Google Sketchup does an amazing job of inferring what the user might want to do next 
while drawing 


Considerations 


There are some issues to keep in mind while using Inference Invitations. 


Intelligent interaction 


The inference engine uses help cues that appear automatically while the user is working 
on the sketch, to identify significant points or geometric conditions. These cues make 
complex inference combinations clear as the user draws. Besides point-based inferences, 
the interface also provides inferences for the linear space or for planar space. 


The result is a very intelligent way to draw. When sketching real-world objects, the user 
will want to play off of existing spaces. The inference engine plays off of this real-world 
metaphor. Even smarter, users can cue the inference engine as to their interest in real 


* Clippy’s official name was Clippit. For the full scoop on Clippy, see http://en.wikipedia.org/wiki/Office_Assistant. 
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time, allowing it to respond to what they are doing. When they start drawing a line, they 
can hover over another line edge telling Sketchup that this is their reference. Then it is 
trivial to draw a line parallel or perpendicular to the reference line (Figure 10-21). 


) 
(Geant) 


Figure 10-21. Google Sketchup uses just-in-time inferences while the user is drawing 


More Content Invitation 


In Chapter 6 we discussed Virtual Pages, a technique for making more content available 


to a page than is currently visible. The Yahoo! home page employed this in its redesign in 
2006 (Figure 10-22). 
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+ NBA Playotls - Stertey Cup - MLB + Indy 600 » Tennis - UFC 


More: News Popufar Election Os 


Figure 10-22. Yahoo! home page contains more content than is statically visible 
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The Yahoo! home page contains more than 20 pages of hidden content and previews from 
6 other Yahoo! sites in a small space. 


In the Personal Assistant (top right, Figure 10-22), whenever the mouse hovers over a 
Yahoo! site tab, it automatically animates open. This provides a More Content Invitation 
revealed through a simple Hover Invitation. 


Yahoo! Games provides an interesting approach to exposing more games. Featured games 
are shown two at a time. A carousel component is used to slide more games into view. 
But to give the idea that there are more games, a small thumbnail viewer shows six games 
at a time. The two main games in view are highlighted in the thumbnail viewer (Figure 
10-23). 


Dual view 


The top item is a carousel showing two 
items at a time. 


The bottom gives more context. It shows 
six items and highlights the two that are 
shown above. 


M American idol Biggest Loser 


SEE 


Scrolling 


Scrolling through the top carousel moves 
the user through more games; this can 
be seen from the context view below. 


Figure 10-23. Yahoo! Games uses a two-level viewer: the top shows two games; the bottom gives 
context indicating that more games can be viewed 


Considerations 


There are some issues to keep in mind when using More Content Invitation. 


Hinting with animation 


In both techniques, the challenge is how to indicate to the user that there is more content 
available. The one exposes content on hover. The other gives a visual sneak peek indicat- 
ing that more content is available. 
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Tip 
Where appropriate, use animation to indicate that there is more content. 


Animation is a powerful way to indicate that more content is available. When Yahoo! 
Games starts up, this two-level game viewer gets kicked off by sliding in content. Every 
few seconds (if the viewer is not interacted with), an animation rolls in new content. Since 
animation grabs visual attention, it works as an invitation to indicate to the user that there 
is more content (Figure 10-24). 


Live Better Longer ua an, 2008 


Vitarnin D and Depression 


Preventing Artetis Pain 


Make Your Job More Rewarding 


Are You Eating Too 


Fast? 


Slowing down can help you slim 
down, Find out how. 


ED Predicts Heart Problems 
Fu Bugs Growing Resistance 
More an women’s health » Stress n Pregrarcy Hares Baby 


Get the Body You Wart 


d j Real Lês Nutrition 
i 
Al Hoalh Topics 
| romesscaou. [marr] 


Figure 10-24. Yahoo! Health has an animated slideshow that reveals the top health stories 


This is the technique used at Yahoo! Health. The top 10 stories are displayed in a list on 
the right with a large visual treatment for each story on the left. Each story is spotlighted 
for a few seconds. A new story is animated into view with a cross-fade animation. Inter- 
acting with the slideshow automatically pauses it. The auto-play can be restarted with a 
“Play” button. The nice thing about this approach is that it exposes the stories in a visu- 
ally attractive manner, and by animating through the stories, invites interaction with the 
content. 


Tip 
When there is more content, use hover to reveal its existence or allow a little of the 
other content to be slightly revealed. 


Hinting by providing a sneak peek 


A final way of creating a More Content Invitation is to reveal partial content on the edges 
of the page (Figure 10-25). 
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Figure 10-25. Starz reveals a little bit of the next movie in its carousel to invite users to go to more 
content 


Showing just a little of the off-page content (providing a peek) at the edge adds a visual 
cue that there is more content before and after the visible area. This strategy can also be 
used with content outside of carousels. Slightly revealing an additional row of content at 
the natural fold for a web page invites the user to interact with what would normally not 
be seen. 


The Advantage of Invitations 


Invitations are an integral part of the nuance that well-designed applications exhibit. Us- 
ing a natural affordance, providing good static invitations, revealing more invitations dur- 
ing interaction, using tour invitations for newly designed sites, taking advantage of all the 
interesting moments in a drag and drop interaction, and using invitations to reveal more 
content are all effective ways to naturally lead the user to the next level of interaction. 
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Principle Five 


Use Transitions 


Kathy Sierra writes a blog called “Creating Passionate Users.” She does an amazing job 
identifying what is happening in the typical user’s head. I had the good fortune to attend 
a workshop by Kathy Sierra of the same name. She puts the spotlight on the “brain” Not 
just the mind, but the physical, chemically driven brain. 


In her talk she recommends the book Mind Hacks by Tom Stafford and Matt Webb 
(O'Reilly), which pulls back the curtain to see how the mind works. I quickly added it to 
my shortlist of must-have books. Fortunately, at the same conference, O’Reilly was giving 
away books at its booth. I could only choose one—and guess what they had? Thats right, 
Mind Hacks. 


Mind Hacks contains 100 short experiments (or hacks) you can do on your own brain. 
Each hack provides a glimpse at the inner workings of our gray matter. But the hack that 
really got my attention was Hack #37, “Grab Attention”: 


Sudden movement or light can grab your attention, thanks to a second region for 
visual processing. 


It turns out that besides the normal visual-processing region of the brain (you are using 
the occipital lobe right now while reading this book), there is a second region that deals 
with attention capture. 


We experience it every day. While talking with a friend at a park, someone throws a Fris- 
bee to another person in the background. You cannot help but notice this change of mo- 
tion even though you are not looking directly at it. You can thank the superior colliculus 
for this little attention interruption. 


As the authors describe it, this region of the brain is not very sophisticated. But it does a 
good job of telling you to pay attention because something may be coming at you. You 
arent sure what it is but you know you better watch out. This response is automatically 
generated deep within the chemistry of the brain. It is something that happens naturally 
without any conscious thought. 


* Kathy no longer blogs actively; however, her excellent work is archived at http://headrush.typepad.com/. 
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Hack #37 explains why there are so many unfortunate advertisements with dancing sil- 
houettes (such as the one in Figure P5-1): motion catches your attention, whether you 
want it to or not! As stated in a New York Times article, “Don't Like the Dancing Cowboys? 
Results Say You Do”? 


Rogers Cadenhead, an author and blogger, resorted to tinkering with his computer 
to block all ads from the company. “I was trying to read a news article and realized 
the dancing mortgage people were eliminating all rational thought from my brain,” 
he said. 


‘Month ! 


Figure P5-1. Dancing cowboy silhouettes from mortgage advertisers grab attention 


If animation is this powerful for advertisers, it can certainly be harnessed and, used in 
moderation, become an effective part of a rich web interface. The question for us is how 
do we use these Transitions (cinematic effects, animations, and so on) to improve the 
user experience? It’s not enough to bring animation into an application: there must be a 
reason. 


In the next two chapters, we will explore a set of common Transition patterns and the 
rationale for when and how to apply the principle Use Transitions in your application: 


Chapter 11, Transitional Patterns 
Introduces the Transition patterns, such as Brighten and Dim, Expand and Col- 
lapse, Self-Healing Fade, Animation, and Spotlight. 


Chapter 12, Purpose of Transitions 
Further explores the reasons for using these powerful effects and where they are most 
appropriate. 


* http://www.nytimes.com/2007/01/18/business/media/18adco.html 
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Chapter 11 
Transitional Patterns 


We have chosen to use the term Transitions to describe special effects that happen over a 
specified period of time. The term transition seems to catch the right spirit of how these 
cinematic effects get applied. They provide the grease that smoothes out what happens 
in the interface. Without transitional effects the user can be left to wonder what just 
occurred. 


There are a number of Transitions available for our use. Let's take a quick survey of the 
most popular. 


Brighten and Dim 


Two patterns that go hand-in-hand are Brighten and Dim. 


Brightening an area of the screen focuses attention there. Since there is no way to raise 
the brightness of a part of the screen, this is typically accomplished by dimming the entire 
application window and exposing a part of the interface at normal, full-brightness level. 


Color changes do not generate the same level of attention in the brain as movement 
changes. How much attention the dimming and brightening of an area on the screen will 
get depends on the speed of the color change (faster is more eye-catching) and the con- 
trast between the dimmed and brightened state (greater contrast equals more attention). 


Tip 


Use Brighten and Dim to control the user's point of reference. 
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Considerations 


Dimming and brightening an area is an effective way to communicate subtle or second- 
ary changes in an interface. Using Brighten focuses attention on an area. Using Dim in 
an area causes the elements to be treated as secondary or not in use. Dimming reduces 
attention to an area. Dim and Brighten can communicate importance, whether an object 
is in use, and if an interface is ready for interaction. 


Importance 


A common technique is to Dim a page and show an overlay in the normal, non-dimmed 
state. The effect seems to brighten an area and dim the rest. This interaction pattern is 
called a Lightbox Effect. 


Wayfaring uses the Lightbox Effect when a user attempts to log in (Figure 11-1). 


Normal state 


Normal brightness. The whole 
Maps, your way. interface is available for 


Create personalized maps interaction. 
Shere them wit you trends 

Espio maps created by ethers 

Cornet and cotsborste 


tnptore Mops New P 


Lightbox Effect 


The user clicks the“Log In’link in 
the upper right. The whole page 
dims in luminance. The overlay 
for the “Log In/Sign Up" box is 
displayed at normal brightness. 
The net effect feels as if the dia- 
log was brightened. 


Figure 11-1. Wayfaring uses a Lightbox Effect to focus the user on login or signup 
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The login box appears brightened (again, in reality the background is the only thing 
changed—it is dimmed). Brightening an area with this technique makes it the primary 
focus. Dimming the background indicates that the rest of the interface is not currently 
part of the interaction at hand. 


Recall the Yahoo! home page tour we discussed in a Chapter 9. Each part of the interface 
introduced is highlighted with the Lightbox Effect (Figure 11-2). 


earct nd it æt 
Smarter.. Faster Personal 


Web images Vides Audio Directory Loos News Shopping 


EJ vances answers: Aik 3 GÆSTEN | Aatmi Questions 


Search smarter 


Figure 11-2. The Yahoo! home page tour uses the Lightbox Effect to highlight each of the three areas it 
introduces 


One issue to consider when using the Lightbox Effect is how jarring the change in lumi- 
nance will be to the user. Dimming the interface and brightening an overlay calls a lot of 
attention to the dialog. In some ways it can make the overlay feel like a big context switch. 
If the goal is to quickly show a dialog, get input, and get out of the way, then do not use 
the Lightbox Effect. Instead use a normal Dialog Overlay. 


Active 


Another use of Dim and Brighten is to show when an object is being interacted with. An 
object can be dimmed when it’s not in use and brightened when it is in use. The original 
version of Measure Map (now a part of Google Analytics) provided a graph detailing the 
number of visitors to a blog over time. In order to decrease visual noise, the graph was 
dimmed when not in use (Figure 11-3). 
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Graph not in use 


When the visitor graph is not in 
use, it is dimmed down. This re- 


a duces visual noise. 


ret 9080 visitors came to your blog 


That's 313 fewer than an average 30 day period 


Visitors to your blog Graph in use 
When the mouse hovers over the 
graph, the image immediately 
mM ME si raises its luminance to bright. 
-L - + This indicates that the graph is 
9080 visitors came to your blog available for interaction. 


That's 313 fewer than an average 30 day period 


Figure 11-3. Measure Map dims and brightens the Visitor Graph based on whether the user is 
interacting with it or not 


When the mouse moves outside the graph, the image begins to fade in luminance. When 
the mouse re-enters the graph area, the graph quickly brightens. The dim and brighten 
effects take about a fourth of a second to transition. 


Tip 
Use Brighten and Dim to indicate whether or not an interface is active. 


Not ready 


You can also use Dim to indicate that a part of the interface is not ready for interaction. 
When searching for hotels in Yahoo! Travel's Farechase tool, the map displaying the found 
hotels is dimmed until the search is finished (Figure 11-4). 
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Sanay. semasa e suasa. omean Still loading/not ready 
B 1 
While Farechase is still searching for 
Yahoo! FarvOrase n now B 
sensing mile uros ease matching hotels, the map result area 
is dimmed. This indicates that the 
area is not ready for interaction. 


Ready 


Once the hotel results are returned, 
the map brightens. The attention 
shifts here when the map is ready for 
interaction. Notice that all other map 
tools show up at this time as well. 


Figure 11-4. Yahoo! Travel’s Farechase uses Dim to communicate that search results are not ready and 
Brighten to communicate when they are ready 


Once the search is finished, the map result area is brightened and all interaction tools for 
the map are displayed (zoom, map styles, etc.) Dimming the map is coupled with other 
indications that the search is not completed. 


Brighten/Dim transitions are very useful. You can use them when you: 


e Need to focus attention on a particular part of an interface (or detract attention from 
another part of the interface). 


e Need to provide feedback indicating that an object is being interacted with. A com- 
mon interaction is to brighten an object when the mouse is hovered over it. 


e Decrease visual noise in an interface. Elements that are secondary can be dimmed 
when not in use. 


e Indicate that a part of the interface is not ready to be interacted with, perhaps when 
an application is being loaded. 
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Expand/Collapse 


It’s helpful to have additional content or other panels hidden until the user needs them. 
This is accomplished by using Expand and Collapse to control a panel’s visibility in the 
flow of the page. 


Considerations 


There are some issues to keep in mind when using Expand and Collapse. 


Expand/Collapse Inlays 


In Chapter 5 we discussed Inlays. A typical way to bring an Inlay into a page is with 
Expand/Collapse transitions. 


When these panels are shown, providing an animated transition for expanding the panel 
open or collapsing the panel closed helps connect the panel to the control that activates 
it. Expand is visually more eye-catching than Brighten/Dim (because the movement is 
more dramatic than reducing color slightly).” 


Yahoo! Bookmarks uses Expand/Collapse to hide and show its edit panel for editing 
bookmark tags (Figure 11-5). 


Design Sort by . “Edit” action not selected 
FE ru ver - A 2 tye a J ven a 


eT | “2h00 Bookmarks provides an “Eoit” 


- Hiigbillalt Milorebarmade Wis 000 = journal g | action that allows other tags to be 
| ig hicksdesign O° added or deleted. 


Refresh Dallas = 


Garrett Dimon / Ternpistes & Stencils for Visio & = 
Omnigraffie 


* You can try this for yourself. Put your left hand straight in front of you. While keeping your eyes straight 
ahead, move your hand to the side until you can just no longer see it from your peripheral view. Now wiggle 
your fingers. Did you see it? Movement makes something normally invisible, visible. 
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Edit action activated; Panel slides 
open 


Instead of using an overlay, the “Edit” 
panel expands in place, pushing 
down other content on the page. 


Panel fully open 


After the opening transition is fin- 
ished, the “Edit” panel allows tag 
editing. 
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Panel closed; panel collapses 


Clicking the “Close” button starts 
collapsing the panel. 


Panel closed 


Once closed, the panel is invisible. 


Figure 11-5. Yahoo! Bookmarks expands and collapses the “Edit” panel in place with the page 


While the same result could have been accomplished with a normal Overlay, the Expand 
in context makes it apparent that it is connected to the “Edit” button as well as applied to 
the content. By making it inline, the context is preserved and not hidden. 


Tip 


Use Expand and Collapse to extend the available screen real estate in the application. 
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Expand and Collapse within the flow of the page is often used to open details about items 
within the page. It provides a nice way to toggle open additional content without losing 
the context of the summary information. 


Expand/Collapse as Overlay 

A slight variation is to have content Expand/Collapse appear as an Overlay on the page. 
Instead of pushing content down or out of the way, the panels simply slide out from some 
part of the page into a layer above the rest of the items on the page. The panel slides out, 
anchored to the activating control. 


Five Runs is a Ruby on Rails application-monitoring tool. It provides a window into the 
inner workings of Rail's apps, helping IT groups track down system issues. The Five Runs 
web application uses slide-out panels for additional controls (Figure 11-6). 


Figure 11-6. Five Runs animates expanding and collapsing panels with additional controls as overlays 


to the interface 
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Be careful to not overuse Expand. For example, in a photo application, if you provide a 
rollover to expand photos from thumbnail to a larger size, the transitions will become 
annoying because the user will see them back-to-back. Either remove the transition alto- 
gether or make it extremely fast. 


An especially egregious example of overuse of Expand/Collapse is when it is applied to 
normal drop-down menus. The primary purpose of transitions is to communicate, and 
no amount of graphic trickery will make a noisy interface compelling. In a recent incarna- 
tion of the Nasa.gov website, we can see Expand and Collapse abused with their overuse 
of animated menus (Figure 11-7). 


MISSIONS MULTIMEDIA 


Figure 11-7. Nasa.gov animates its menus: each menu animates its expand and collapse, resulting in 
situations where multiple menus can be open at a time 


This type of animation abuse is the anti-pattern Animation Gone Wild.’ 


One problem with animating Expand and Collapse like this is that it makes the interface 
feel sluggish. It is also superfluous. Do we really need the menus animated? Does it com- 
municate anything? Drop-down menus have been common for more than 25 years. Add- 
ing animation is simply gratuitous and unnecessary. 


— Tip 


Avoid gratuitous Animation when expanding and collapsing content. 


Buzzword also employs Animation Gone Wild by animating each toolbar button open 
and closed on hover. While it is a clever way to conserve space when the items are not 
interacted with, it feels like a series of Mouse Traps (Figure 11-8). 


* No, there is no companion DVD available on late-night TV for this anti-pattern ;-). 
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Figure 11-8. Several tool items get animated open at the same time by moving the mouse through 
Buzzword’ toolbar 


Expand and Collapse can be used to: 
e Manage lots of content or modules. 
e Manage real estate on the screen. 


e Emphasize the currently hovered-over object (e.g., photos in a photo album) as part 
of a rollover system. 


e Provide details about an item in a list. 


e Make content available for edit. Use instead of a pop up if the content being expanded 
is one of many items and there is a benefit to showing the detail in context with the 
other items. 


Self-Healing Fade 


When deleting or moving items, it is often helpful to temporarily expose a “hole” where 
the object being removed once lived. Animating the remove of the item and the closing of 
the hole reinforces where the deleted item was removed. 


Considerations 


This Self-Healing Fade pattern is used when deleting to-do items in Backpackit. Once 
an item is removed from an area, a hole is left. Next, the hole seals up, effectively healing 
itself (Figure 11-9). 


Lists Delete selected 
Remove this item 
M And this one too 

aye IT adding a new item 


The list item is selected for delete by clicking the trashcan. 


ints Item starts to fade 


Remove this item 


And this one too The list item starts to fade out to indicate that it is being deleted. 
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thts Item gone 


Remove this item 
The item fades all the way out, reinforcing that the item is 


gone. 


And this one too 


tats Gap begins to close 
Remove this item , 3 ; 
Ran this jhe 100 The text box below slides up and claims the deleted item's 
a EY 


Th Item gone, gap gone 
l Remove this item 
And this one too 


| 


| 


The text box is now directly in the deleted item's position. 


Figure 11-9. 37 Signals’ Backpackit uses a Self-Healing Fade to reinforce that an item has been deleted 


Self-Healing transitions can be used to: 
e Remove an object from a list or grid. 
+ Convey that the removal happened and where the object was removed from. 


e Indicate the completion of a drop operation in which the dropped object was moved 
from one place to another. 


Animation 


In our everyday world, objects occupy real space and don’t normally instantly appear and 
disappear. We throw a piece of trash into the trashcan and see it leave our hand and go 
through the air into the trashcan. 


Considerations 


In our interfaces, we do not need to mimic every movement from the real world. Inter- 
faces would be dreadfully slow. But by using Animation to show where an object came 
from or is going, we can make it easier for the user to find the object again or feel confi- 
dent putting the object away in the future. Using animation to position an object in a grid 
confirms that it went into the slot. This type of feedback clarifies the user interaction. 
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Zoom back 


My Yahoo! uses a zoom-back Animation if a drop fails. It communicates simply that the 
module returned from where the user attempted to drag it (Figure 11-10). 


Dragging module 
The dragged module is represented as a small gray 
outline. 
k 
Yellow Pages 
Your Search: 
Search — 
Search By: 
© Category Business Name 
City & State or ZIP: 
Facebook Zoom-back animation 
L Bil Scott 
“ppnta yoat stede If the module is dropped on itself, an animation of 
View Mené atate apcates the dragged module flies back to the corner of the 
Activity module. The zoom-back animation indicates that 
E 7 new messages r the drop was not successful and the module re- 
SEn turned to its original location. 
F 2 pokes 
Yellow Pages 
Your Search 
… Search — 
Search By: 
© Category Business Name 
City & State or ZIP: 


Figure 11-10. My Yahoo! uses a zoom-back animation to show that a module did not get moved, but 
instead returned to its original location 


While the use of a small gray rectangle for the drag object is less than helpful (a thumbnail 
of the object being dragged would be better), the image of a gray rectangle flying back to the 
module’ original spot is simple and clear enough to communicate what happened. 


Tip 
Build association between elements on the page with Animation. 
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Drop animation 


Another place to use Animation is when dropping modules on a web page into new loca- 
tions. In earlier versions of My Yahoo!, the dropped module would animate into place. 
The earliest version took about one second to animate into place. A later version took it 
down to less than a half-second. 


Cut it in half rule 


While discussing the art of motion graphics with a practitioner from the field, I learned 
a simple rule of thumb about downplaying special effects. To avoid over-emphasizing a 
luminance effect or timing transition just cut the effect’s values in half. 


Applying this rule to transitions, when calculating animation timing (or other transition 
effects), arrive at the best guess for timing. Then simply cut the effect in half. And maybe 
half it again. It is too easy to get focused solely on the effect and forget the overall interac- 
tion story you are trying to create. This simple rule is a nice way to keep transitions in 
check. 


Tip 
After defining a transitional effect, simplify it by making another pass to cut the effect’s 
values in half. 


In the current version of My Yahoo!, the dropping modules process uses no animation 
at all. The same can be said for iGoogle (Figure 11-11). When a module is dropped, no 
animation is used to show where the object went. 


Why? Well in many ways the animation is gratuitous. The user has positioned the object 
for dropping. There is plenty of feedback right before the drop, so animating it into place 
just makes the interface feel slower and doesn’t communicate anything new to the user. 


6 How Laser Woapons Work 
| ae Video. Cute and Cuddly Dads: Lion 


Figure 11-11. It’s obvious where the dropped object will land in iGoogle, so it is not necessary to 
animate the drop 
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Animation is a great technique when used correctly. It can be used to: 


e Smooth out a transition when a direct remove-and-appear in another place on the 
page would be a jarring or confusing way to show what just happened. 


e Show how an object has changed places or containment on a page. 


Spotlight 


Spotlights are useful when a change has occurred in an interface. By momentarily high- 
lighting an object, you can subtly notify the user of a change in the interface. The Spot- 
light is often accomplished by first highlighting the background of an object, then fading 
out the highlight. An example of this technique is in Backpackit (Figure 11-12). 


Anti-Patterns Talk Before change 


O Complete Presentation Edit is selected 
D Set up webex meeting i 


During change 
Anti-Patterns Talk for College] GERE) o cnu 


An edit field is animated in con- 
text. The “Rename this list” but- 
ton is pressed. 


D Complete Presentation 


Anti- rns Talk for Coll Spotlight on change 


= Complete Presentation 


After the change is made, the 
LJ Set up webex meeting 


new title is spotlighted briefly. 
The spotlight fades over the 
course of a second. 


Anti-Patterns Talk for College Spotlight fades out 


E Complete Presentation Once the second is up, the spot- 


ED SRD WES ORG light has faded back to the back- 
ground color of white. 


Figure 11-12. Backpackit uses spotlighting to highlight modifications 


Considerations 


When the title of the list is changed, it is momentarily spotlighted by highlighting its 
background in yellow. The color fades to the background color in about one second. This 
does a nice job of communicating that a change has occurred without keeping the notifi- 
cation around a long time. It avoids the Idiot Boxes anti-pattern we discussed in Chapter 
5 by using a very subtle indication of change. 
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Tip 
Use Spotlight to temporarily call attention to a change in the interface. 


Signaling change 

Flickr uses Spotlight when adding photos to the Organizer. A status message is placed in 
the upper right. If another action is taken, a second status message appears. The first mes- 
sage moves down (visually swaps location with the first) and then fades out. The current 
message will fade out as well after time passes. This is a simple way to provide confirma- 
tion that requires no action and removes itself automatically (Figure 11-13). 


& 1 photo was added to he batch! 


& 1 photo was added to he batch! 


4 


Figure 11-13. As each photo is added to the Flickr Organizer, a status message is added; as messages 
age, they fade out 


Use this strategy in order to: 


e Show that an object state has changed or has been updated with new information. 


e Call attention momentarily to a different part of the interface that might normally 
not be noticed. 


There are other Transition patterns, but these are the most common. In the next chapter, 
we'll look at the purpose for Transitions. 


* See http://developer.yahoo.com/ypatterns/parent.php?pattern=transition for the Transition patterns in the 
Yahoo! Design Pattern Library. 
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Purpose of Transitions 


We pointed out in the previous chapter that objects don't just pop in and pop out in the 
real world, appearing and disappearing suddenly. We usually see them go away or go 
somewhere in particular. An interface that does not mimic some aspect of this real-world 
behavior will be harder to understand. 


Our eyes are wired to react to movement. The world doesn't flicker. It doesn’t disappear 
or suddenly change and force us to look for the change. Things move smoothly in the real 
world. They do not “pop up.” Transitions smooth out the jarring world of the Web, mak- 
ing changes appear more natural. 


The main purpose for Transitions is to provide an engaging interface and reinforce 
communication. 


Engagement 


Transitions can be used to increase engagement. 


Interacting with an area on the screen that responds by growing slightly, or seeing an 
accordion pane “snap” into place creates a richer and more compelling experience. The 
interface seems more alive and reactive. Of course, going overboard with these techniques 
can distract from what is being communicated and become just a Web 2.0 version of the 
horrendous blink tag. 


Download at WoweBook.Com 


234 Chapter 12: Purpose of Transitions 


Certain contexts tip the scale more toward the engagement side and less toward the com- 
munication side. In areas like game or car sites, engagement can take on a more important 
role. However, in most websites, communication is the most important purpose for tran- 
sitions, with engagement being a secondary consideration. 


Communication 


Transitions are first and foremost about communication. Harry Marks, award-winning 
broadcast designer, stated:” 


Ifyou don't have a story, no amount of graphic trickery will make it interesting. 


The story is the key. Transitions are for making the story more compelling, filling in the 
hard jumps, and making an action more concrete and believable. Transitions communi- 
cate in the following ways: 


e If an object fades away, users know it changed state from visible to invisible even if 
they are not staring directly at the object. 


e If an object fades into view, users know the object has arrived. It was not there but 
now is. 


e Ifan object fades rapidly, it is seen as an important event. If it fades slowly, its impor- 
tance is lower. 


e If an object is “coming at” users (getting larger and appearing to go past them), then 
users think of it as something that is important (and perhaps dangerous). 


e If an object zooms down in size rapidly and disappears, it will capture the users’ at- 
tention immediately. 


Given the way transitions can communicate, what exactly do they communicate? They 
give us a way to: 


e Maintain context while changing views 
e Explain what just happened 

e Show relationships between objects 

e Focus attention 

e Improve perceived performance 


e Create an illusion of virtual space 


* See Sarah Allen’s presentation on Cinematic Interaction Design at http://www.slideshare.net/sarah.allen/ 
cinematic-interaction-design/. The quote is from slide 8. 
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Maintain Context While Changing Views 


We discussed several techniques in Chapter 3 for creating a virtual space larger than the 
static page. An essential ingredient to pulling off this effect is the proper use of Transi- 
tions, which allow views to change while maintaining overall context. 


Slide In and Slide Out 


Most monitoring applications have pages and pages of charts and tables. Five Runs takes a 
virtual page approach and pulls it off by using Slide In and Slide Out effects (Figure 12-1). 


fame hd A mm Slide Out 


When “CPU charts’ gets selected, the current 
chart for “Key Metrics” starts sliding out. 


i 
|| 


== 
Slide In 


Once the “Key Metrics” panel slides out, the 
= “CPU" panel slides in. 


Figure 12-1. Five Runs switches between metric views by a simple Slide Out/Slide In transition 
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Different charts can be selected by clicking on the bar graph summary. In reality, this pro- 
cess is the same as flipping through a series of tabs. But instead of a tab controlling the vis- 
ibility of each panel, clicking on the associated metrics bar causes the content to switch in. 
The transition of sliding out the old and sliding in the new causes a clear mental connec- 
tion. The surrounding context does not change so the switch in views stays in context. 


Another just as effective (and possibly more effective) approach would be to simply cross- 
fade between the two panels. This method creates a faster transition while clearly com- 
municating that the panels are associated with the different bars clicked. 


Faceplate 


The Laszlo weather widget uses a cross-fade between its configuration panel and weather 
panes (Figure 12-2). This simple Faceplate pattern ties the two panes together and gives 
an indication that the other pane is always hidden just below the currently visible panel. 
Once the weather is displayed, clicking on the zip code in the upper right cross-fades the 
panels to get back to the zip code entry pane. 


Rain or Shine? Rain or Shine? 


oe Orne spa aame erer semne appas 


Figure 12-2. Laszlo’s Weather widget uses a cross-fade between the configuration faceplate and the 
weather details 


Laszlo’s Weather widget uses a cross-fade to switch between entering the zip code and 
viewing the panel. The Faceplate transition is especially useful for extending screen real 
estate. It works when both panels are the same size and each panel is independent. 


Flip 

Another way to have two panels share the same space is to use a Flip transition. The effect 
is the same as flipping a playing card over. The animation is effective if it actually feels like 
the panel is being flipped. Generally, the flip side of the image displays all the knobs and 
switches for configuring an object. 


Skitch is a desktop application for taking screen snapshots. All of the configuration con- 
trols are located “on the back side” Of course, in reality there is no physical back side to 
the application, but the Flip transition helps create this illusion (Figure 12-3). 
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Figure 12-3. Skitch uses a Flip transition between the application and configuration details 


The Flip transition is rarely seen in Ajax/DHTML applications, as it is a CPU-intensive ef- 
fect. However, with Flash or Silverlight technologies, the effect is more easily achievable. 


Carousel 


We have discussed Carousels in previous chapters. Carousels are great for extending vir- 
tual space. But what effects reinforce this virtual extension? Let’s look at four carousel 
implementations to discuss different approaches to animating carousels. 


One of Amazon’s many carousels actually does not use any animated transitions at all. 
Each arrow click just shows the next batch of books (Figure 12-4). 


Customers Who Sought This Item Also Bought Giza+ 
The Dan's Mit fees Stege Hum Aedes Maion Asin Cea lasere Yax Tane Me, Tos, Gitar od ot the Laast = 
eo e NN Spicacad De kert- by fannen, Lovtucs. and. Scere ta ot Bin Banen ba br Pebvoe Mate: 

IL. Oy Bryce Fogle < Bete Bost: Connecti. Oy Lirie a nni ice rå 
riiin uo $259 patins tærer: Drikke = 982.05 Arik wm 98357 Skin 98000 


Figure 12-4. This particular carousel on Amazon does not use any animation; it provides no clue to the 
direction users are moving through the content 


This one is rather disconcerting. Without the visual effect of content sliding in, it is easy 
to get confused about whether content is moving in from the left or the right. Adding the 
effect creates the illusion that content is being pulled into the page through the carousel. 


Another Amazon carousel takes just the opposite approach (Figure 12-5). Visually it rep- 
resents the items in a circular fashion to attempt to create a “true” carousel effect. And 
it uses lots of animation. In fact it uses animation in a way that appears to be gratuitous. 
Each click of the arrow moves the carousel around a few pixels at a time. Clicking and 
holding a little longer spins the carousel faster. In fact, it generally spins it too fast to stop 
on a desired book. 
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Our Favorites for Summer (Re)Reading 


a 
= 
i 


TEETH 


ZAUIE 
SMITH 


Figure 12-5. Amazon uses a circular carousel as a widget for its associates to use; the carousel has the 
opposite problem as the last one: it animates too much 


A simpler implementation is to just animate the movement through the content space. In 
Flickr, clicking the arrow animates content into view. Since all content to the left is earlier 
in time and all content to the right is later in time, animating the movement through time 
is helpful in finding photos (Figure 12-6). 


153 of your photos =: 0 solectod | Select of 


dy 


Figure 12-6. Flickr employs the more common approach to use animation to flip through carousel 
content, in this case, back and forth chronologically 


How fast should Carousels be when they animate’? It’s not easy to quantify. But the car- 
ousel should be fast enough that it will be finished animating by the time a normal user 
is ready to click the arrow again. Usually this is much less than half a second and never 
more than a second. 


* For a reference on animation timing, see Timing for Animation by Harold Whitaker and John Halas (Focal 
Press). 
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The Starz on Demand carousel animates one image at a time (while displaying four im- 
ages at time) and takes about a second to complete the animation. This is painfully slow, 
especially since it only brings in one item at a time. You find yourself clicking a lot of the 
arrows to see available movies (Figure 12-7). 


CHANNELS 


Figure 12-7. Starz on Demand animates one image at a time and takes about a second to complete the 
animation 


Accordion 


Another component that helps maintain context while switching views is the Accordion. 
We discussed this pattern briefly in Chapter 6 on the topic of List Inlays. The Accordion 
is a variation on a Tab panel. Each panel title is the activation to slide open its associated 
panel. The currently visible panel and the panel being opened transition to closed and 
open states at the same time. This allows the carousel to take up a fixed amount of space 
(Figure 12-8). 


Figure 12-8. Opening Rico’s Accordion widget shows one panel at a time; it animates opening and 
closing each panel simultaneously 


Accordions are good for collapsed modules of content. However, they should be used 
sparingly, as they have a strong visual style. If you scatter them around or make them too 
beveled, they will quickly clutter the interface. 


Normally, accordions activate on click. However, a trend of late is to activate accordions 
on hover. This is normally a bad idea. Elsewhere we have written about the anti-pattern 
Mouse Trap and this can easily become one. However, you can see a nice implementation 
of a hover-based Accordion on Apple.com’s Mac store (Figure 12-9). 
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Buy online. 


Find a reseller. 


Download Safari 3 free 


Figure 12-9. Apple.com uses an accordion to provide content for “Where to Buy”, “Hot News” and 
“Mac@work”; each panel is activated on mouse hover 


A less-than-helpful implementation of a mouse hover-activated Accordion is on the 
Nasa.gov site (Figure 12-10). 


Hubble Captures Galaxies Gone Wild 


Every Day is Earth Day on the international Space Station 


$, 


w 


NASA Satellites Aid in Chesapeake Bay Recovery 


Figure 12-10. Nasa.gov activates its accordion panels on hover 


The Nasa.gov accordion contains panels that are three times wider than the Apple accor- 
dion and are the centerpiece of the home page. This means that when users move their 
mouse over the accordion panel titles, panels fly open and closed. Since the targeting is 
three times as wide, twice as high, and the main part of the page, this process becomes 
very disorienting. The interaction is not helped by how visually heavy the accordion is 
compared to Apples more-subtle styling. Apple's accordions are in the right sidebar, and 
the point is to get users to discover the hidden content. 
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Tip 
Don't automatically open accordion panels on hover if the panels are large or central 
to the site content. 


Explain What Just Happened 


What do you do when one part of the interface affects another part of the interface? This 
is what happens in the Apple.com store when users configure a computer for purchase 
(Figure 12-11). Whenever users make a change to their configuration (main part of the 
page), the values in the summary and specifications update (left side of the page). To in- 
dicate that a change occurred, the changed values get spotlighted. 


Customize your Mac. (i Initial configuration 
re E~ mes The configurator takes up the main 


part of the page (left side). 


The price summary and specifica- 
tions are located in the righthand 


Nemery 
Mon mea ee fena ME a ee) 
ten he care ae (Renee satia KNEE CER KRAM OM SÆR 


mate sidebar. 
FE terres cee a - te 
Bør AAN 
WORE tenet OPA Dao hda FOr 
Customize your Mac. ae Configuration changes 
ae en babam a =. 
tn one When the configuration is changed, 


the price, shipping, and specifica- 
tion information are highlighted 
with spotlighting. 


Qe coe, oe -ia 


ROC ketai A Deen heh Hite 


Figure 12-11. Apple.com spotlights changes to the price and shipping as users make changes to their 
configuration 
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Recall the yellow Spotlight used by Backpackit: it fades out after about one second. Con- 
trast that to Apples approach of highlighting in blue and keeping the spotlight in effect 
(Figure 12-12). 


Anti-Patterns Talk for College 
— Complete Presentation 
_ Set up webex meeting 


Figure 12-12. Backpackit spotlights change 


Why the difference? Some of the differences are just stylistic choice. But in Apple's case, 
users want to know that they changed the default configuration and price. The change it- 
self is important enough to keep spotlighted. In Backpackit’s case, users are just changing 
to-do items, not the amount of money being spent on a computer. 


Tip 
Keep the last change highlighted (don't fade out with Spotlight) if there is a chance 
the change happened off-screen and the user might not see it. 


In Yahoo! Finance, stock values are updated in real time. When a stock value changes, 
it gets the Spotlight treatment. However, to avoid making the interface feel extremely 
chatty, the designers chose to use a subtle color change, a very light shade of green for the 
price going up and a very light shade of red for the price going down (Figure 12-13). 


Actos6am ET: 30.45 4 0.07 (2.16%) 


Figure 12-13. Yahoo! Finance uses a very subtle color change and a quick change back to the original 
background color (half a second) 


Just how bold or subtle should the change be? 


Jason Fried (founder of 37 Signals) dealt with this issue when designing Basecamp’s Help 
system. When switching between different Help panels, there was little to visually indicate 
a change. 


In a first-pass design for labeling panel titles (Figure 12-14), the yellow Spotlight tech- 
nique was considered but not followed. For one thing, it was too subtle. And it seemed to 
call too much attention to the title, as if the title was the object being changed. Leaving the 
titles with black text on a white background made switching panels completely unnotice- 
able. When the panel titles were inverted (white text on a black background), the titles 


* In the latest version of the Apple store, the highlight fades out just as with Backpackit. This adjustment is actu- 
ally unfortunate, as changes made below the fold are not highlighted by the time the user scrolls back to the 
top. 
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became highly visible during a switch (Figure 12-15), not only because of the contrast of 
inverted text, but since the black background calls out the length of the title (by its bound- 
ing box), any variance in title length is readily apparent. 


Please choose the feature you seed help with Please choose the feature you seed help wiih 
Pangia snd par mn ana K3] fae hey a 
Heip with people and permissions Help with file sharing 


Figure 12-14. Switching between the panels “Help with people and permissions” and “Help with file 
sharing” is not apparent with this design of Backpackit’s Help section 


Please Choose the feature you seed heip wah Please choose the feature you seed help wah 
Sergio one perenne 9 (Traner | 


Figure 12-15. Changing the background of the panel titles to be inverted causes them to get noticed 
when a switch occurs 


Opposite effect 


Not every attempt to highlight change works. Flickr Daily Zeitgeist is a blog sidebar plug- 
in (Figure 12-16). As new photos show up, they fade slowly in place, overlaying four pho- 
tos within the tile of photos. Not bad. Users may or may not notice the photo showing 
up, but that's OK. That detail is secondary. However, when the photo goes away, it rapidly 
scales down, revealing the images underneath while replacing one of the four images. The 
sudden rapid movement once again gets the superior colliculus to say “What the...?” Users 
look at the photos, and by the time they glance they are not really sure what happened. In 
reality they're seeing the new photo fading into place, but the effect makes it feel as if they 
missed something important.” 


Figure 12-16. Flickr Zeitgeist rapidly scales down the image going away and slowly fades in the new 
image 


* This is discussed in detail by Tom Stafford and Matt Webb (the authors of Mind Hacks) at http://www.oreillynet. 
com/pub/a/network/2004/12/06/mndhcks_1.html. 
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Tip 


Movement gets more attention than a simple color change. 


Show Relationships Between Objects 


Transitions can also tie objects together and indicate that they are related. On the Macin- 
tosh opening, an icon creates a genie-like effect when it swooshes up and out (like the 
genie coming out of the bottle) into the full-size application window. Once users have 
seen it, it is obvious that the icon and the application are related. 


Zoom is a simple way to create this effect. Transmit uses this on its site when a user wants 
to take a look at the screenshot for the product. Instead of going to a different page or just 
providing a pop up, the screenshot zooms and fades up from the thumbnail. It is clear that 
the screenshot is the detailed view for the thumbnail (Figure 12-17). 


tal ee Thumbnail view 


te Bes È ém “Transmit shopping page” shows a small set of thumbnail 


z= views of the application. 
HIES CS Ss 


pzz Zoom and fade up 
ben gå å dm Clicking on a thumbnail causes the screenshot to fade in and 
- Zoom out. 


Screenshot displayed 


Even after the screenshot zooms to full size, it is obvious that 
it is tied to the thumbnail below because of the transitions 
that were employed. 


Figure 12-17. Transmit uses Zoom and Fade to tie the thumbnail and the screenshot together in the 
shopper's mind 
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The Gap ties a thumbnail to a detailed product view by using a series of Zoom rectangles 
when a shopper selects an item. The Zoom rectangles tie the object to the detail box dis- 
played (Figure 12-18). 


ohne 


Figure 12-18. The Gap shows details about an item; it ties the details to the item by using Zoom boxes 
as a transition effect 


Focus Attention 


Sometimes you would just like to make sure the user sees something. It’s not necessarily a 
change in the interface, but just something to be aware of. 


In the earlier example of Transmit, the “Close” box is placed on the upper left of the snap- 
shot detail view. The overlay uses a Fade transition to fade in the close button after the 
it appears. By waiting until the other animation is finished, the “Close” box gets readily 
noticed (Figure 12-19). 


Dialog appears without “Close” box 


When the dialog first appears there is no “Close” box. 


“Close” box fades into view 


The “Close” box fades into view. This focuses some attention on 
the “Close” box for when the user will need to dismiss the dialog. 
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“Close” box is available 


The “Close” box is visually distinct and available for interaction. 


Figure 12-19. Transmit fades in the “Close” box after the dialog is displayed to focus attention on how 
to dismiss the dialog 


Focusing attention can also be associated with what the user is currently interacting with. 
In Chapter 11 we discussed the MeasureMap graph that used Brighten when the mouse 
hovered over it and Dim when the mouse moved away from it (Figure 11-3). Similarly, 
the Gap uses Spotlight when focusing the user’s attention on the selected pair of jeans 
(Figure 12-20). 


Normal view 


a > manama ereda All jeans are initially rendered the 
M easy tt 


pet 


Spotlighted view 
MORE JEANS dum nomen 


e 


When a pair of jeans is clicked 
on, the rest of the jeans dim. This 
focuses the attention on the pair 
selected. 


Figure 12-20. The Gap spotlights the selected pair of jeans to focus the shopper's attention on the 
selected merchandise 


Improve Perceived Performance 


There is a difference between actual performance and perceived performance. The old 
saying, “A watched pot never boils” is true. Diverting the user's attention is a good way to 
make a pot boil faster. Something that takes 10 seconds will appear to go by much faster if 
the user has something to read or is shown a progress animation during the delay. With- 
out such a diversion, the time seems to pass much more slowly because the user is not 
sure the system is still responding. User testing has confirmed that Transitions improve 
the perceived time an operation takes. 
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Tip 
Keeping the user engaged during a long process improves the perceived performance 
time. 


A good example of this technique at work is with Yahoo! Travel’s Farechase tool. Search- 
ing for a hotel can take a long time. In this example, it took 30 seconds to complete (Figure 
12-21). 


San ame. CA 


SUNDAY, 082288 © SUNDAY, 062408 


San ane CA 
SUNDAY, 0622.06 © SUNDAY, 062008 


søen IU U ave! sl 
for the best prices 


San Jose. CA 
SUNDAY, 087268 © SUNDAY, 062008 


Yahoo! FareChase is now 
searching multiple travel sites 
for the best prices 


Yahoo! FareChase is now 


searching multiple trave! sites 
for the best prices 


San Jose. CA 
SUNDAY, 062248 c SUNDAY, 06/2208 


Yahoo! FareChase is now 
searching multiple trave! sites 
for the best prices 


souer G | fns | Name | Osice 


Progress bar displayed 


The progress bar is the first interface 
element shown. It initially displays 0% 
progress. 


Searching status animated in 


As the progress bar animates, a status 
message expands down like a win- 
dow shade. 


Additional status area appears 


An additional status area that re- 
veals which service is currently being 
searched is animated in as well. 


Searching services 


A spinning set of arrows adds ad- 
ditional feedback that something is 
happening. 


Rolling through services 


The “Now Searching” progress bar be- 
gins to roll through various services 
being searched. (Services are animat- 
ed into place similar to the way an 
odometer works.) 
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Sen Jose. CA Results shown 
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Figure 12-21. Yahoo! Travel's Farechase tool steps through five stages of animation before producing the 
search results 


Since Farechase is actually retrieving results from a number of different hotel search ser- 
vices, the search can take quite a while. Farechase cleverly goes through five stages of 
Transitions to make the time appear to go faster. The result is that the users are kept 
informed and engaged throughout the process and report a much better experience, since 
they're less frustrated with the time it takes to get results. 


Create Illusion of Virtual Space 


We devoted all of Chapter 9 to the Virtual Space. Transitions can assist in creating the 
illusion of Virtual Space. 


A significant improvement to the Yahoo! home page in the last few years has been the 
additional content packed in. One of the ways this is done is with the Personal Assistant. 
The Personal Assistant appears at the top right of the Yahoo! home page and contains a 
mini-view of six Yahoo! sites. Hovering over any of the site buttons causes the panels to 
animate open (Figure 12-22). 


Check your mail status: Sign In Free mail: Sign Up Not activated state 


ES] Man | GG) Messenger | B Radio | The Yahoo! Personal Assistant shows six col- 


lapsed mini-views of Yahoo! sites. 
& Weather «3 Local 8 Horoscopes 


Check your mail status: Sign In Free mail: Sign Up Activated by hover, expand starts 


[=] Man | (© Messpgare B Radio | On mouse hover the hidden panel starts to 


animate open, Creating a new virtual space. 
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Check your mail status: Sign In Free mail: Sign Up 
CE] sat (GG messenger | B Radio | The site panel animates to full open position. It 
& oo mt mm] allows the user to interact with the mini-view. 


Sign in to preview your email here. 


The all-new 


Expand finishes 


Yahoo! Mall: More ways 
o connect with everyone 


Figure 12-22. Yahoo!’s Personal Assistant uses Expand and Collapse to create a virtual mini-space for 
other Yahoo! sites 


Expanding content with an animation emphasizes that the content is associated with the 
button that activated it. In this case, hovering over the “Messenger” button animates a 
preview of the Yahoo! Messenger site. Transitions are key to underpinning the concept of 
Virtual Pages we discussed in Chapter 7. 


Best Practices for Transitions 


The more rapid the change, the more important the event. 
Rapid movement is seen as more important than rapid color change. 
Movement toward the user is seen as more important than movement away from the 


Transitions are a powerful way to communicate and engage the user. While they can be 
abused, they can also be beneficial. Here is a set of best practices for employing transitions in 
your applications: 


user. 


Very slow change can be processed without disrupting the user's attention. 
Movement can be used to communicate an object's new home. By seeing the object 


moving from one p 


able to locate the object in the future. 


Keep the transitions near the users’ area of focus . This will make the transitions more dis- 
coverable and feel less like advertising. 


Gimmicky effects annoy and distract rather than communicate. 


Transitions should normally be reflexive. If an object moved and collapsed to a new spot, 
users should be ab 
delete an object an 


The misuse of effec 


Try not to rely solely on transitions for communicating change in the interface. 


lustrates the concept of Symmetry of Interaction. 


ace to another, users understand where it went and therefore will be 


e to open it and see it open up with the reverse transition. If users 
d it fades, then if they create an object it should fade into place. This 


s by ads should teach us to be cautious about overusing transitions. 
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React Immediately e&— 


The previous two principles introduced the power of invitations and the usefulness of 
Transitions. Invitations are powerful because they directly address discoverability and 
provide feedback before an interaction happens. Transitions are useful because they pro- 
vide visual feedback during an interaction. But another class of feedback exists. It is the 
feedback that happens immediately after each interaction with the system—an immediate 
reaction paired with the user's action. 


Newton's Third Law of Motion states: 
For every action, there is an equal and opposite reaction. 


This law explains how a bird flies. Its wings push air downward. At the same time the air 
pushes the bird upward. The amount of force downward on the air equals the amount of 
upward force from the air. For every action there is an equal and opposite reaction. These 
are often called action-reaction force pairs. 


While we can't literally extend Newton's law to the world of user interfaces, we certainly 
can apply this principle to the way we should interact with users. When users click on a 
button, they expect the button to depress. When they type in a field, they expect to see 
characters show up in the text box. When they make a mistake, they want the application 
to tell them where they goofed. When they start to search, they would like the results to 
show up as they type. When they start an unknown process, they hope they will be guided 
step by step with clear, timely, and contextual feedback. 


In short, users want the application to react to their every action. The interface should 
React Immediately. 


While there is a possibility of too much feedback (or, more accurately, too much of the 
wrong feedback—a concept we will discuss in the upcoming chapters), a system with little 
or no feedback feels sluggish and thickheaded. Immediate reactions are an expected part 
of intelligence. You can’t have an intelligent interface without them. 


Wundrbar.com is an example of an interface that reacts immediately (Figure P6-1). Wun- 
drbar provides a search layer to a number of third-party services such as purchasing flight 
tickets, renting cars, or checking gas prices. As the user types a flight search in an input 
field, the interface formats a flight search form in real time. The tight loop between input 
and immediate feedback makes it easy to create a correct search (Figure P6-1). 
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Figure P6-1. As the user types in a flight search, Wundrbar immediately displays what it understands; 
the user is able to express all the needed input 


It should be noted that while interfaces built in this style have only recently shown up on 
the Web, this principle is not new to the world of user interfaces. The Mac OSX Human 
Interface Guidelines calls this principle “Feedback and Communication,’ and describes 
its goal as: 


...keeping users informed about what's happening by providing appropriate feed- 
back. When a user initiates an action, always provide an indication that your applica- 
tion has received the user's input and is operating on it.” 


Jakob Nielsen, in his widely recognized heuristics research, described a principle of “vis- 
ibility of system status” in which: 


...the system should always keep users informed about what is going on, through 
appropriate feedback within reasonable time.* 


Bruce Tognazzini, founder of the Human Interface Group at Apple, captured the essence 
of this in his design principle called Latency Reduction,’ in which the user is kept en- 
gaged throughout a lengthy process. The emphasis is on communication, feedback, and 
engagement. 


The next two chapters will look at two areas where we can directly apply this principle: 


Chapter 13, Lookup Patterns 
Discusses Auto Complete, Live Suggest, Live Search, and Refining Search. 


Chapter 14, Feedback Patterns 
Covers Live Preview, Progressive Disclosure, Progress Indication, and Periodic 
Refresh. 


+ http://developer.apple.com/documentation/UserExperience/Conceptual/AppleHIGuidelines/X HIGHIDesign/ 
chapter_5_section_2.html 


+ http://www.useit.com/papers/heuristic/heuristic_list.html 
+ http://www.asktog.com/basics/firstPrinciples.html#latencyReduction 
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Chapter 13 
Lookup Patterns 


A good portion of application interfaces is involved in looking up information. Whether 
an application is performing direct searches, filtering search results, or aiding in input, 
there are a lot of opportunities to provide lookup assistance. 


Since lookup is really a shot in the dark for the user, any real-time feedback will be valued 
as users work to complete their tasks. There are four lookup patterns we will apply the 
principle of React Immediately to: 


e Auto Complete 
e Live Suggest 
e Live Search 


e Refining Search 


Auto Complete 


Auto Complete is a powerful pattern that benefits from a reactive interface. As the user 
types input into a field, a drop-down menu of matching values is displayed. When done 
right, the choice that best matches will be auto-selected. The user can stop typing and 
accept the choice that has been matched or choose a different value from the list. The 
selected value is then entered into the field. Yahoo! Mail uses Auto Complete for email 
addresses (Figure 13-1). 


Prompt shows suggestions 


Tal z 


= 


I a mere Typing the letter “Zz” immediately matches all 
Subject: contacts that start with that letter (in either first, 
last, or email fields). 
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To: Zack Somebody <zark somebody Bsomewhere.com>; Tab enters text 
& Simply hitting Tab enters the matched contact. 
Subject 


Figure 13-1. Yahoo! Mail automatically completes email addresses 


The Yahoo! Mail Auto Complete has a singular purpose: help users find an email ad- 
dress from their contact list. However, the user can choose to ignore the displayed value 
and instead enter a new email address. This distinguishes Auto Complete from a normal 
drop-down selection box. Selection boxes provide a limited set of valid values. Users are 
not free to add their own values. For example, entering a U.S. state is best done with a 
select box and not Auto Complete since you don't need to create new states. 


Considerations 


At first glance Auto Complete can seem like a simple interaction. However, there are a 
few key interesting moments to consider. 


Typing 

How long should you wait to display feedback as the user types? In the case of Auto Com- 
plete, feedback should be sent after each character is typed. Since the focus is on entering 
a value in a field, the set of choices should be shown instantaneously. However, it is ac- 
ceptable to delay retrieving values between keystrokes if the user is a fast typist. 


Matching 

In the case of Yahoo! Mail, the typed character(s) are matched against any part of the con- 
tact’s name and email address. This is important since sometimes the user recalls part of 
an email address and other times is typing the contact’s first or last name. 


Yahoo! Mail also highlights the matched contact as well as displaying the matched char- 
acters in bold text. This clearly indicates which contact was matched as well as how the 
match was made. 


The Up and Down arrow keys can modify the matched value. They simply move up and 
down through the list of partially matched contacts. 


Selecting 


Once an item is matched, it should be straightforward for the user to accept the match. 
In the case of Yahoo! Mail, hitting the Tab key enters the matched contact into the input 
field. 
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This might seem obvious. However, it is not uncommon for Auto Complete interactions 
to miss this crucial step. A counterexample to Yahoo! Mail ironically comes from Yahoo! 
as well. The Yahoo! Travel Farechase product provides an Auto Complete feature for en- 
tering origin and destination airports (Figure 13-2). 


YAHOO! FARECHASE SS" Prompt shows suggestions 
no Co 


Typing “san jose” shows two matches. How- 
ever, neither airport is selected. 


Return 
ee + -DHE fe + 


ore zerit Ok um Seah 
YAHOO! FARECHASE SS Tab fails to enter text 
EZ Hitting the Tab key does not enter the first 
eadaramh - matched airport. Instead it just accepts the 
Search by: " Rams UT Onse * u . n 
mas = phrase “san jose" 
kan ee se | n: 
X A aprh 
Return 
ae lage + weit Glave © 
et CMe heer eda 
Benn 


© hre Sei Qtun 


Figure 13-2. Farechase’s implementation of Auto Complete makes selection tedious 


Farechase handles the delay during typing well but fails in the way it handles matching 

and selecting. Neither of the two airports that match the phrase “san jose” gets high- 

lighted. The only indication of which airport Farechase thinks is the best match is based 

on position. Since “San Jose, CA—SJC (San Jose International Airport)” is the first airport 

in the list, it seems that this might be the best match. But hitting Tab reveals that neither 

was considered worthy of choosing. Instead the user gets to keep a partially typed phrase, 
san jose”. 


The only way to get it to work correctly is to use the Up and Down arrow keys (or the 
mouse) to explicitly choose an airport from the drop-down set of choices. This is a 
cumbersome, unnecessary step that is easily avoided by automatically selecting the first 
matched item in the list. 
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Kayak Auto Complete 


Kayak.com is a good example of getting typing, matching, and selecting correct for Auto 
Complete. In Figure 13-3, the user wants to fly to Dallas, TX. He isn’t sure what the air- 
port code is, but he wants the one in Dallas/Fort Worth. Typing “dall” gets two matches: 
DFW and DAL (Love Field). Realizing that DFW is the correct airport and seeing that it 
is already highlighted, he hits the Tab key. It enters the correct value for the DFW airport 
in the input field. 


To airport) o mmħį To (city or airpo 
id Dallas/Fort Worth, TX - Dallas/Ft Worth Ir 
>> Dallaw/For Wodh, TX - Dallas Fi Wodh inii (DFW) FT show nearby airports 

+> Dallas, TX - Love Field (DAL 
Return 


Return 
———~— a Oo a ec 
07/18/2008 Bs Anytime >| 07/18/2008 a | Anytime xj 


Figure 13-3. Kayak shows the matched airport and allows the user to accept the selection by hitting the 
Tab key 


The only critique of this system is the use of light yellow for the selection color. In most 
cases it is too subtle. However, unlike Farechase, Kayak just does the right thing when the 
user hits the Tab or Enter key. There's no need to use the down arrow key to select the first 
item: just press the Tab or Enter key to accept the match. 


— Tip 
Auto Complete should never make the user scroll through the drop-down to choose 
the already selected item! The Tab key should enter the matched item. 


This follows one of Jakob Nielsen's 10 usability principles: Error Prevention. Providing 
immediate reactions and the proper cues prevents the user from entering the wrong value 
(e.g., “dall”) and having to go back to correct a mistake that should have been avoided in 
the first place. 


Best Practices for Auto Complete 


Here are some best practices to keep in mind: 
Use Auto Complete for input assistance. 
Match on multiple fields. 

Show results when the user pauses typing. 
Allow selecting matched value on Tab key. 
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Live Suggest 


A very close cousin to Auto Complete is the Live Suggest pattern (also known as winnow- 
ing). While Auto Complete provides suggested real-time values for an input field, Live 
Suggest provides real-time search term suggestions for creating a search. The context 
switch from input field to search box and from input value to term suggestion puts a dif- 
ferent twist on the interaction. 


Google Suggest was one of the first examples of Live Suggest on the Web. As the user 
types in the Google Suggest search box, the top search terms that match the user's input 
are shown in a drop-down. Figure 13-4 shows two versions of Google Suggest with differ- 
ent approaches to matching and choosing. 


Early version of Google Suggest 


Google In the earliest versions of Google 


Suggest, the best Match was 
Suggest highlighted and the search 
field was populated with the 
Web Images Groups News Froogle Local” more» matched value. 


tom chaplin 452,00 
tom cochrane 347,000 søvuks 


Later version of Google Suggest 


In the more recent versions of 
Google Suggest, the closest 
match is not highlighted and 
the search box does not get 
auto-populated. 


tom cruise films 997 000 meuts 
tom cruise imdb 117,000 results 
tom clancy's endwar 2,870,000 results 
tom cochrane 371,000 muts 
tom cruise wiki 408,000 results 
tom cruise scientology 510,000 suls 
tomcat 22,400,000 meuts 
tom clancy's end war 442,000 results 
tom clancy's hawx 759,000 rweults 

forty 


Figure 13-4. Two versions of Google Suggest take different approaches for selecting a matched item 
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Considerations 


Just as in Auto Complete, Live Suggest has three interesting moments to focus on: typing, 
matching, and selection. Let's look at how both versions of Google Suggest handle these. 


Typing 

The two versions handle reactions to user input the same way. As the user types, sugges- 
tions are presented in real time with no noticeable delay. If the user pastes a phrase into 
the search box, it will just display results for phrase and not attempt to display results for 
individual characters. 


Matching 


The most powerful aspect of Google Suggest is its ability to narrow in on good search 
terms based on partial input. Here is how Google describes the service: 


As you type into the search box, Google Suggest guesses what you're typing and offers 
suggestions in real time. This is similar to Google’s “Did you mean?” feature that offers 
alternative spellings for your query after you search, except that it works in real time. 
For example, if you type “bass,” Google Suggest might offer a list of refinements that 
include “bass fishing” or “bass guitar.” Similarly, if you type in only part of a word, like 
‘prog,’ Google Suggest might offer you refinements like ‘programming,’ “program- 
ming languages, ‘progesterone’ or “progressive.” 

Our algorithms use a wide range of information to predict the queries users are most 
likely to want to see. For example, Google Suggest uses data about the overall popu- 
larity of various searches to help rank the refinements it offers. ... Google Suggest does 
not base its suggestions on your personal search history.” 


What this means is that by progressively applying the suggestion algorithm to the current 
input, the search terms are narrowed to yield a good search result. It also has the potential 
of producing novel or intriguing suggestions. 


Providing real-time feedback can have a negative side effect. If what is shown diverges 
from what the user is actually looking for, instead of narrowing in, the process becomes 
distracting. This is the tension in all suggestion-based systems. Are you distracting the 
user or helping her narrow in on better results? You should continue to make live sug- 
gestions only if you are certain you can narrow and not distract. Otherwise, take a more 
conservative approach and change the suggestions less frequently. 


Tip 


Suggestions should always narrow toward the user's goal and avoid distracting her 
with needless information. 


* See http://labs. google.com/suggestfaq. html. 
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Narrowing suggestions are powerful. For example, typing “tom cr” shows a number of 
common Tom Cruise searches. Continuing to type “tom cruise crazy” yields specific com- 
mon searches (see Figure 13-5). 


Googie Googie 


Suggest Suggest 
kom cr kom cruise crazy 
tom Tims 524.900 enta bom onise crazy 
tom cruise imd tom cruise crazy lyries 


tom cruise sciertotogy tom onise crazy video 
tom cnis miks tom cruise crazy oprah 
tom cruise comh tom cruise crazy tab 


tom Cruise om oprah 

tom cruise sclertology video 
tom cruise movie list 

tom onise crazy 

tom crise mihipecte 


EDH Coops 


Figure 13-5. Google Suggest progressively applies suggestions that help narrow in on the best search 
terms 


Yahoo! Search also provides a Live Suggest for its searches (see Figure 13-6). One differ- 
ence between Google Suggest and Yahoo! is that Yahoo! provides feedback on matched 
terms. 


Figure 13-6. Yahoo! Search highlights what is different between its suggestions and what the user inputs 


At first glance it seems that Yahoo! is highlighting the wrong thing. Recall the Yahoo! 
Mail Auto Complete example earlier in this chapter (see Figure 13-1). The characters that 
matched the user’s input for each matched contact are displayed in bold. But in Yahoo! 
Search, just the opposite happens. Instead of highlighting the matched text, it highlights 
the difference. This twist shifts the focus to how each suggestion will narrow the search. 


This illustrates how dependent interaction styles are on context. With Auto Complete, 
we are trying enter a direct value. The suggestions are possible matches. With Live Sug- 
gest, we are trying to formulate the right query for a search. Each suggestion has a unique 
context to offer. When the words “is”, “oprah’, “video”, “scientology”, and “juice” are high- 
lighted, users can quickly scan and get the suggestion’s context. Each suggestion provides 
a way to head off in a different direction. 
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Both Live Suggest implementations have another nice side effect. Spelling mistakes are 
caught earlier in the cycle since the guesses are based on implicitly correcting the spelling 
of the search query. 


Selecting 


In the earlier versions of Google Suggest, the best match (first item) was automatically 
chosen. Not only was the suggested term highlighted but also the full matching string 
was placed in the search box. Typing “tom c” produced “tom cruise” with “ruise” selected 
(see Figure 13-4). The idea of selecting the portion of the text not explicitly typed was to: 


«+ Allow the user to hit Enter to accept the implicit match. 
e Allow the user to hit Delete to remove the implicitly added string (e.g., “ruise”). 


More recent revisions have taken a different approach. Instead the best match is not se- 
lected and the search box is never modified by matches found. The idea is to: 


+ Avoid making assumptions that the guesses are what the user wants. Guesses have to 
be explicitly chosen with the arrow keys or the mouse. 


e Allow the user a more normal search-box experience. 


There are advantages to each approach. The first is more heavy-handed and assumes the 
guess has a high probability of being the user’s intent. As we saw earlier with Auto Com- 
plete, selecting the suggestion as the value to accept makes for a more pleasant experi- 
ence. But the current approach better captures the idea of a “suggestion”; it’s just that—a 
suggestion, not an explicit choice. 


More Considerations 


Live Suggest doesn't have to look exactly like the preceding examples. It can come in other 
flavors. When users enter a new question in Yahoo! Answers, an alternate set of questions 
is suggested (see Figure 13-7). 


Ask Your Question: Enter Your Question and Check Spelling Question entered 


"RER Suggestions are not made while 
Whey is the sky tive the user is busy typing. 


1, Crewe your question 


2. ADS 081803 10900800) 
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Ask Your Question: Enter Your Question and Check Spelling Suggested alternatives 


"aes Suggestions are triggered when 
cen het bot the user stops typing. 


1, Erser your question 


Neve tand sm ke Comme then 
way ove my the why be 
. s ma De ay me mas 


Figure 13-7. Yahoo! Answers suggests already answered questions as an alternative to creating a new 
question 


Typing 

This method departs from the previous Live Suggest examples. Instead of triggering sug- 
gestions after each character is typed, suggestions are displayed whenever the user pauses 
typing. If a complete question is entered without a pause, no suggestions will be displayed 
until the very end. Showing suggestions too early would be distracting and would not help 
users narrow down to the question they are trying to formulate. 


Matching and selecting 


Instead of a drop-down, a list of similar questions is provided in context just below the 
question asked. The reason? If users pick an alternate question, they don't need to create 
a new question. Selecting an alternate question takes users directly to the question and its 
answers, and out of the task of creating a new question. 


Best Practices for Live Suggest 


Here are some best practices to keep in mind: 
Use Live Suggest for suggestion assistance, not for direct search results. 
Provide suggestions highlighting the context of each suggestion. 
Start showing suggestions after a reasonable delay (pause in typing, etc.). 


The interface should help users narrow down on a good choice without overly restricting 
them. 


Download at WoweBook.Com 


262 Chapter 13: Lookup Patterns 


Live Search 


Yet another close relative to both Auto Complete and Live Suggest is Live Search. As 
with Live Suggest, a search query is being formulated. But instead of displaying suggested 
search terms, actual live search results are shown in real time. 


A clear example of this is ZUGGEST" for Amazon. Not affiliated with Amazon.com, Fran- 
cis Shanahan created a Live Search for Amazon products (see Figure 13-8). 


E dd, FE 
krvwonDs wed | [== - Typing phrase web 
Retrieves a grid of book results that 
heir Byes Were The Rew Rules of BE ome cme match the phrase “web” 
|” Wetchieg God Marketing and PR: A Common Sease 
iMeck} 1 Mow tø Lee Mewes _, Apeonach to Web 
Let Oreo —. oes, LS Useritiny, 200 
39 NEW from Podcasting, Virai Editon 
38.99196.75 used) Markatryg aag Oline Doca) 
Modis te Rasch Buyers Directly us: Pr044070 
(Reon) 47 NEW from $19.00(519.00 
Lat Prices sd” 
43 MEW fram O22 30809 26 
eet 
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KN Don't Make Me Think: buggen Orsanwosver C83: Pl" tafteencer: The i i 
A Connes Sense Tre Missing Manat Power to Change in real time. 
Aporeads be Web (eek) gar a ayhicn 
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Figure 13-8. ZUGGEST for Amazon is a third-party way to search Amazon using the Live Search 
pattern 


* See http://www.francisshanahan.com/zuggest.aspx. 
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Considerations 


Providing in-context, real-time results to queries as they are typed is a powerful way for 
users to find what they are looking for. Live Suggest sets up a tight feedback loop for 
finding the right query. However, the actual search results are shown outside this iterative 
feedback loop. Live Search, on the other hand, creates a tight feedback loop directly with 
the search results themselves. 


How does the handling of interesting moments differ between Auto Complete and Live 
Suggest? 


Typing 

Since returning search results generally takes longer than the time between typing char- 
acters, searching should wait for the user to stop typing. This allows feedback to happen 
at times when it will not be distracting, as well as providing better user experience perfor- 
mance. While ZUGGEST does not provide a Busy Indicator or Progress Indicator, it is a 
good idea to provide this feedback as soon as a search is initiated. Otherwise the interface 
will feel sluggish. Instant feedback improves the perceived performance. 


Matching and selection 


There is nothing inherently unique in the way search results are matched for Live Search 
or normal search. Nor is there anything unique about how items are selected. Live Search 
primarily affects the way searches are retrieved in response to typed queries. 


Contextual results 


While ZUGGEST presents a full search interface, sometimes the results can be shown 
in a more compact way. This is especially useful if you want to contain Live Search in a 
separate tool on the page or in a sidebar. 


Firefox version 3 introduced search directly into the URL bar of the browser (Figure 13-9). 


J. design bv 
Digg - Design Š 
http://digg.com/design 

W Design - Wikipedia, the free encyclopedia 
http. //en.wikipedia.org/wiki/Design 
_) School of Design > Carnegie Mellon University 
http://www design cmu.edu 
DesignAddict Homepage 
http://www designaddict.com 
db designboom 
http://www. .desianboom.com/ 


gb industrial design courses ? designboom 
http://www designhoom.com/eng/ X 


Figure 13-9. Firefox's AwesomeBar uses Live Search to retrieve results based on previous interest in 
websites 
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In the words of the Mozilla blog:” 


Dubbed the ‘AwesomeBar’, it lets you use the URL field of your browser to do a key- 
word search of your history and bookmarks. No longer do you have to know the do- 
main of the page you're looking for—the AwesomeBar will match what youre typing 
(even multiple words!) against the URLs, page titles, and tags in your bookmarks and 
history, returning results sorted by “frecency” (an algorithm combining frequency + 
recency).t 


While ZUGGEST bases its results strictly on a straight product lookup, the AwesomeBar 
bases its search on personalized information. Since the browser can keep track of the us- 
ers interest in pages and knows how recently they accessed them, the Live Search can be 
a powerful aid to finding previous sites they have visited. 


The variance in the way these two sites perform matches has to do with context. With a 
straightforward search, you don't know if users are looking for something they have seen 
before or not. And you would rather not limit their results. In the case of the browser 
URL, chances are that users are heading to a site they have been to before. 


Previews in Live Search 


When Live Search results are displayed in a drop-down or sidebar, users need enough 
context to choose the right result. Without the proper detail, users will have to click 
through to see whether they have really received the result they were looking for. If the 
result isn’t correct, they have to return to the page and start the search all over again. 
While the initial live search is fast and easy, the ensuing click-through and failure can be 
slow and painful. 


Any easy way to minimize this happening is to show some preview information for each 
search result. 


In the AwesomeBar example (Figure 13-9), each URL is displayed with its favicon, docu- 
ment title, and the URL. 


Another approach is to provide detailed previews on demand. As we discussed in Chapter 
3, Hover Details are a way to reveal lots of additional information when the user hovers 
over an item. 


Dunstan Orchard created one of the early Live Search examples on his blog, 1976design. 
com (Figure 13-10). Previews are displayed in a balloon pop up when the mouse hovers 
over one of the search results returned. This allows a more compact view of search results, 
yet helps the user find the right result before clicking through. 


* See http://blog.mozilla.com/blog/2008/04/21/a-little-something-awesome-about-firefox-3/. 
+ See the Mozilla blog at http://tinyurl.com/6mowhb. 
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Summary: 


Snippet 


l'im very...” 


Stats: 
259 words, mo images 
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Home 
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The Cirffriend gets a new job. and Dunstan calls it a day 
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Posted: 


~ fella] 


TOP 9 SEARCH RESULTS 


2 years, 11 momhs ago erm 
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kind of post 
At Safeway dete 


part two 


fri Counter 


Figure 13-10. Dunstan Orchard; blog provides details on blog posts with a balloon pop up on mouse 


hover 


Narrowing too quickly 


Yahoo!'s Instant Search takes a narrower approach. A balloon pop up shows up with what 
it feels is the best single match. It’s like an abbreviated Google Suggest and the Google “I’m 
feeling lucky” button merged into a single interface. 


Typing “tom cruise” yields a single result from IMDb (Figure 13-11). 


YAHOO! SEARCH 


Instant Search "="^ 


tom cruised 


photos, filmography, and facts about the super star 
www, imo. com/name/nm0G00 129 


Search the Web 


Figure 13-11. Yahoo! Instant Search shows a single result based on what the user types 


Here are a few caveats: 


e Users frequently have to type fairly specific, complete search terms. “tom c” does not 
cut it; “tom cruise” does. 


e Having a single result is too narrow. In this example, users will always get the IMDb 
database result for Tom. Is that what they want? 


+ The balloon can be distracting since it calls so much attention to itself and draws us- 
ers’ eyes away from where they are typing. And when they don’t get the suggestion, 
they may think they have made a mistake. 
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Combining Live Suggest and Live Search 


It is possible to combine Live Suggest and Live Search in a single interface. In an ex- 
perimental interface, Yahoo! released (for a short period of time in 2006) AllTheWeb 
LiveSearch (Figure 13-12). 
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Figure 13-12. AllTheWeb.com LiveSearch was an experimental combination of Live Suggest and Live 
Search 
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AllTheWeb LiveSearch is no longer live on the Web, however, Yahoo!'s search has 
evolved to incorporate a variation on combining Live Suggest and Live Search into a 
single interface. 


Tip 
Combining Live Suggest and Live Search is a good way to provide a dynamic search 
experience. 


As we saw in Figure 13-6, the main page for Yahoo! Search incorporates Live Suggest in 
its interface. The search results page incorporates a pull-down shade that contains the 
Live Suggest results. Changing the search query brings new suggestions in the pull-down 
shade area. Clicking on any of the suggestions displays new search results for the page 
(Figure 13-13). 


Web images Video | Local Shopping more + 


towsbuf ajax 
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- Computer Business Online via Yahoo! UK & Ireland 


Figure 13-13. Yahoo! Search combines Live Suggest and Live Search into a single interface 


Live Search can be expensive 


It is a good idea to keep in mind that Live Search can be an expensive operation. Being 
able to search instantaneously with every user’s keystroke (or some set of keystrokes) can 
greatly increase server load. 


In an early version of Yahoo! Mail (Beta version), typing a mail search triggered search on 
each keystroke. This was removed due to heavy server load (Figure 13-14). 


* You can find a screencast of it at http://www. flickr.com/photos/designingwebinterfaces/2758155472/in/ 
set-72157606696104907/. 
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Figure 13-14. Yahoo! Mail switched from a Live Search model to a traditional submit model for Search; 
performance considerations were the primary drivers 


Best Practices for Live Search 


Here are some best practices to keep in mind: 


Use Live Search for free-form searches. 


Provide generous context for each result returned. Results need to be returned quickly. 
Show enough results to help narrow in on a solution but not too much to be distracting. 
Where possible, combine Live Suggest and Live Search into a single interface. 


Refining Search 


Another variation on Live Search is Refining Search. Also known as Faceted Browse, 
Refining Search provides a set of live filters that allow the search results to be tuned in 


real time. 


One of the earlier applications that effectively used Refining Search on the Web was Kay- 
ak, an online travel search site. The filter bar on the left dynamically updates the flight 
results on the right (Figure 13-5). 
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Filters on the left, results on the right 


This is a typical layout for Refining Search. 
The filters on the left include checkboxes 
and sliders. 
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Figure 13-15. Kayak uses a Refining Search model to allow users to tweak travel results in real time 


Considerations 


As we have shown with Auto Complete, the Live Suggest and Live Search React Im- 
mediately principle is a powerful way to narrow in on a desired result. Kayak uses this 
technique effectively to allow the user to iteratively get a new set of results by tweaking a 
set of filters. While the filters can be placed anywhere on the page that makes sense, most 
sites (like Kayak) place the filters in a lefthand sidebar. 


Avoid page refreshes 


It is important that each iteration of the result is displayed without a page refresh. 


eBay uses a Refining Search (Figure 13-16). However, refinements are triggered only af- 
ter hitting a "Submit” button. Each search generates an in-between page refresh. While 
this step may sound minor, it is very disruptive to the action-reaction feedback loop. The 
page result throws a blank page in the mix and usually scrolls the page back to the top. 
After each iteration, users have to relocate some element on the page to get their bearings, 
reposition the page, and analyze what changed. Generally any updates to the results after 
one of these page refreshes is not immediately noticed by the user. It’s as if the page refresh 
also refreshed the user’s mind! 
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Figure 13-16. Refining Search is triggered by scrolling down and hitting the “Show Results” button; the 
results are shown after a page refresh that scrolls the page back to the top 


Tip 
Avoid page refreshes in Refining Search. The point is to quickly iterate to a result. 
Refreshing the page causes the user to lose her context. 


Even smoother transitions 


On the opposite end of the spectrum from the eBay page refresh model, Viewzi, a search 
interface, uses Transitions to smooth out Refining Search iterations. In the “4 Sources 
View; results from Yahoo!, Google, Ask, and MSN are shown on the same page. In the 
first panel of Figure 13-17, only results from Ask are initially shown. 


Figure 13-17. Viewzi uses animated transitions to “smooth out” the changes between each Refining 
Search iteration 


Clicking the pink bar (denoting “display Google results”) brings the Google results into 
the mix. Notice that the second panel shows the Google results flying into the page. The 
final panel shows both Ask and Google results displayed on the same page. The in- 
between fly in Transition makes it clear what got added during the Refining Search. 
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Custom filters 


Roost, a real estate search site, provides an interface similar to Kayak’s. One nice addition 
is the ability to add custom search terms. Typing custom attributes in the “Custom Search 
Terms” panel adds them to the set of filters. The terms can then be checked on and off in 
real time. Like Kayak, Roost makes use of sliders for the Refining Search (Figure 13-18). 
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Figure 13-18. Roost uses sliders and a custom search area to refine searches 


It should be noted that, while visually attractive, sliders can be hard for users to control. If 
you employ them, you should: 


e Display a tool tip or other real-time feedback while dragging a slider knob. 
e Allow clicking anywhere on the background or along the range to set the slider. 


e Make sure any background graphic gives additional feedback for the values along the 
range. 


e Consider an input field for accessibility considerations. 


e Allow double sliders (a knob for minimum value and a knob for maximum value) to 
overlap. Otherwise certain ranges can't be entered. Endless.com is one of the few sites 
that gets this technique right (Figure 13-19). 


Price Price 


Select price range Select price range 


0-0 D 


32% $259 $253 $259 


Figure 13-19. Endless.com allows its dual sliders to overlap; as a result, any range of values can be set 


Download at WoweBook.Com 


272 Chapter 13: Lookup Patterns 


Think outside the box 


Filters in a Refining Search don’t have to be just text fields, sliders, and checkboxes. They 
can be visual controls that provide clear feedback as to what the result will be before it is 
actually selected. 


Like.com is a good example of this approach (Figure 13-20). Colors, shapes, sizes, and 
textures all are various ways to refine the search. You can even highlight a part of a prod- 
uct to find more like it. 
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Figure 13-20. Like.com uses colors, textures, shape, and sizes to refine product searches 


Endless.com provides filters for finding shoes (Figure 13-21). The filters include things 
like shoe sizes, widths, and color families. The filters more closely represent the values 
than just simple checkboxes, sliders, or drop-downs. 


Cate meme) 


Figure 13-21. Endless.com provides visual representations for filtering shoe sizes, widths, and color 
families 
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When to trigger a search 


While eBay requires the “Show Items” button to trigger a search and Kayak and Roost 
perform the search immediately after each refinement, there is a middle ground. Just as in 
Live Search, sometimes it makes sense to wait before triggering a Refining Search. 


In Yahoo! for Teachers, a Refining Search is used for finding other teacher’s projects and 
lesson plans (Figure 13-22). Clicking various grade levels in succession only fires the 
search after the user has stopped interacting (for about half a second). The interface feels 
responsive, but not too chatty. 
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Figure 13-22. Yahoo! for Teachers triggers Refining Search following a burst of user interaction with the 
refinement filters 


Best Practices for Refining Search 


Here are some best practices to keep in mind: 
Use Refining Search for product searches when there are multiple facets to filter. 
Use visually compelling filter controls. 
Be careful with sliders, as they tend to be harder for users to control. 
Use animations to smooth out refining iterations. 
Use proper delays to limit unnecessary refinements (wait until the user stops tweaking). 
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Chapter 14 
Feedback Patterns 


Reacting immediately to the user is not only needed for lookup patterns, but in order to 
provide interactive feedback in other situations. There are several patterns that help keep 
the user informed about what is happening in the application: 


e Live Preview 
e Progressive Disclosure 
e Progress Indicator 


e Periodic Refresh 


Live Preview 


A Live Preview gives the users a glimpse beforehand of how the application will interpret 
their input once submitted. 


We mentioned Jakob Nielson’s Error Prevention principle earlier. This principle says: 


Even better than good error messages is a careful design which prevents a problem 
from occurring in the first place.” 


Benjamin Franklin seemed to be speaking about the same principle when he uttered the 
famous quote, “An ounce of prevention is worth a pound of cure” 


Tip 
Use Live Previews to prevent errors. 


* Nielsen, Jakob. “Ten Usability Heuristics.’ See http://tinyurl.com/aruty. 
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Being reactive to user input is an excellent way to provide that ounce of prevention. Live 
Previews dispense just the right amount of information, in context and just in time to 
keep users informed, preventing unnecessary mistakes. 


Wundrbar.com is an example of an interface that reacts immediately (Figure 14-1). Wun- 
drbar provides a search layer to a number of third-party services such as purchasing flight 
tickets, renting cars, or checking gas prices in Des Moines. 


>: wundrbar Search invitation 


[AM] The “examples” help area serves as an invitation 


to discover how to interact with Wundrbar. 


examples 
rental car detroit may 25-28 twitter going skiing 
fly boston to sfo on friday gas prices in do 
show calendar 416 wikipedia knus torv akds 
learn more 
>» wundrbar Reaction: Flight form 


(SSS 


Typing the word “fly” triggers Wundrbar to dis- 
play an Expedia flight search form. Notice three 
inputs are displayed: “Origin’, “Destination’, and 
“Departure date” 


> wundrbar Reaction: Origin 
fly bosto Typing “fly boston” automatically fills in the Ori- 


gin with “Boston, Logan, MA (BOS)". 
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> wundrbar 


> wundrbar 


> wundrbar 


Reaction: Destination 


Adding “to dfw” causes the destination to be un- 
derstood. The complete airport name is filled in. 
Notice that the format of the origin/destination 
has changed to look complete. It is no longer 
shown as a field to fill in, but as something more 
permanent. 


Reaction: Airline 


Typing “on american a” is enough for the “Other 
trip details” to fill in with “American Airlines” The 
“Dates” section still has a red underline, indicat- 
ing that there is more to fill out. 


Reaction: Dates 


Finally, typing “from july 12 to july 16” completes 
the form. 


Figure 14-1. Wundrbar provides an immediate reaction to each user input 


Note that before we start seeing action-reactions, we get a nice Static Invitation in the 
“Examples” section. Once we start typing, this interface perfectly illustrates the principle 
of action-reaction pairs. Our action of typing the word “fly” leads to the reaction of an 
Expedia flight search panel being displayed. The panel is shown immediately in context. 
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A total of three invitations is shown in this reaction. The origin, destination, and depar- 
ture date all have a red dotted underline. This cues the user that the application needs this 
information. 


Emboldened by the intelligence displayed, let’s experiment with some more text. Typing 
“boston” and “to dfw” each get a reaction as Wundrbar fills out the origin and destina- 
tion. At this point it does an interesting thing. Sure that it has understood the user’s intent, 
it changes the way it displays these two pieces of information. The fields are no longer 
shown needing input, but instead are shown as read-only text (Figure 14-2). This indi- 
cates that Wundrbar has interpreted the origin and destination and is ready to move on 
to other input. 


Figure 14-2. The origin and destination are displayed as an input form before the user types them; 
afterward they are changed to display not as input, but as static text 


The intelligence continues as the interface correctly interprets “fly bos to dfw on american 
airlines from July 12 to July 16”. 


But what happens if the user gets off the rails and enters something incorrect? By continu- 
ing to display what it thinks users mean, Wundrbar gives users the feedback they need 
just in time. This is a key to reactive interfaces. The reactions must be in real time in order 
to be effective. In this case, if users see it has interpreted their input incorrectly, they can 
change their phrase in real time to get the correct response. 


If a user did mistype, she would see something like Figure 14-3. The red underline next 
to the “To” field is very visible. It serves as a nice way to cue the user that the input is 
incomplete. 


> wundrbar 


Figure 14-3. Typing “zzz” for an airline just leaves the “To” field displaying a red-dotted underline 
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Considerations 


There are some issues to consider when using Live Previews. 


Immediate feedback 


Instead of users entering a password, hitting the “Submit” button, and then finding out 
that their password is “too short,” the Google signup process (Figure 14-4) keeps users 
informed as they modify their entry. The nice thing about this interface is that it lets us- 
ers make an informed decision about their password strength before making their final 
choice. 


Google uses a Live Preview to help users choose an adequate password during the sign- 
up process. 


Required information for Google account Too short 


Your current email address: | omeoneiis omewhere.com 


Feedback is immedi- 


Cita ai =j Password attength. 1 ' ate. The password is too 
: short. 
Required information for Google account Fair 


Your current email address: |; omeoneiis omewhere.com 


The password strength 
Choose a password z Pmswordaiengh Fai meter changes dynami- 
cally as the user strength- 
ens his password. 


Required information for Google account Strong 


Your current email address: | omeonefsomewhere. com 


The blue, full line with 
Choose a password: p { Pammana: Strong the word “Strong” signals 
completion. 


Figure 14-4. Google uses Live Preview to show password strength before creating an account 


Engagement 


The use of a bar that fills up as users strengthen their passwords is reminiscent of the 
“ring-the-bell” carnival game, where you swing the hammer and try to hit the bell—only 
getting to a strong password is much easier. 


Tip 


Use Live Previews to improve user engagement. 


Yahoo! Small Business uses Live Preview to help users find a domain name without leav- 
ing the current page (Figure 14-5). 
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Find a domain name: 


(es ssøgetseugre com) 


www, bills portfolio.com _ Sqprch 


Sorry, billsportfolio.com is taken. 
Ser amiar name options 


_ Search Again 


Enter domain name 


Clicking “Search” checks whether 
itis available. 


Checking... 


The busy indicator is shown. 


Not available 


The name is taken. The Search 
button changes to “Search 
Again’. Also, a link to see “similar 
name options’ that are available 
appears. 


Figure 14-5. Yahoo! Small Business uses Live Preview for domain name search 


In context 


The difference between this example and the Google example is the use of a search button 
to trigger the in-context preview. The search button removes the ambiguity. But instead of 
going to a different page for showing the results of the attempted domain name creation, 


the results are provided in context. 


In this example, the Live Preview is overlaid directly on the initial search box. The advan- 


tage of this approach is that it: 


+ Does not disturb the page by adding more content into the flow of the page. 


e Feels more lightweight than a page transition. 


e Gives a clear place to put a progress indicator. 


e Provides room for a status message and two courses of action: “Search Again” or “See 


similar name options”. 


Last.fm also uses a button to check the validity of a field during its “Sign up” flow (Figure 
14-6). Typing into the username field immediately reveals a “Check Availability” button. 
Pressing the button triggers a Live Preview check of whether this username is available. If 
it is not, a red exclamation point is placed beside the field and the button changes to say 


“Try another name”. 
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Sign up for Last.fm Sign up form 
Already have a profile? Log in here 


Initially, input forms are displayed as simple 


Desired username: f e prompts and inputs. 
Email 
Sign up for Last.fm Check availability 


Already have a profile? Log in here A i 
Once a value is entered in the “Desired username”, 
OR Sir — - a “Check Availability” button is displayed. Clicking 
e a] starts the username check. 


Conall 


The occasional newsletter t keep me up-co—ane 


Sign up for Last.fm Checking... 
Already have a profile? Log in here 


The username is checked for availability. 


Desired usermame = hy 


Conall 


The occasional newsletter to keep me up-0p—cane 


Sign up for Last.fm Try another name 


Already have a profile? Log in here z 
If the username is already taken, the button 


ownsuane TO changes to “Try another name". 


Emait 


Figure 14-6. Last.fm uses a Live Preview to help the user pick a valid username 


Notice that a tight feedback loop was created in all three examples. For each significant 
action, there is an equal and opposite reaction. This is fandamental to the success of using 
Live Previews in your application. 
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Showcasing products 


Live Previews are not just limited to form input. They also can be used in an online prod- 
uct catalog to preview a product. Strictly speaking, previews have been used on sites for 
almost as long as there has been a Web. Showing a close-up of a camera on an electronics 
site is a common technique. But what sets a Live Preview apart from a simple preview is 


its interactive nature. 


Land's End uses a tool called My Virtual Model’ to bring Live Previews to clothes shop- 
ping. It is based on the premise that if you can show what the clothes will look like on the 
shoppers, they will be happier with their purchases. While virtual models can only come 
so close to reality, users can personalize the model with their height, weight, body shape, 
and so on. Then when they select shirts, pants, and shoes, their virtual model will appear 


dressed with the items (Figure 14-7). 
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Figure 14-7. Clicking on different articles of clothing is immediately reflected on the virtual model 


* My Virtual Model is a third-party tool for online clothing stores. See http://www.mvm.com/. 
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The MINIUSA site uses the Live Preview pattern in a similar way. Displaying how differ- 
ent models of Mini Coopers will look with different color combinations instantaneously 
is a powerful marketing tool (Figure 14-8). 


COLORS, FEATURES & SPECS 


COLORS, FEATURES & SPECS 


Figure 14-8. MINIUSA.com sports a Live Preview for selecting Mini Cooper models and altering color 
combinations on the fly 


The site also lets the user spin the car around 360 degrees to get a look at the car from 
every angle (Figure 14-9). 


Figure 14-9. Changing perspective is as easy as moving a slider; the feedback is in real time 


The ability to react instantaneously to the user’s color or perspective changes fits well 
into the marketing message of cool and zippy. Imagine an old-style interface of “make 
the change,” and “go to another page and see the result” Live Previews allow users the 
freedom to experiment. 
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Best Practices for Live Preview 


ake feedback immediate. 


ors cC 


e preview. 


Here are some best practices to keep in mind: 
Use Live Previews to prevent errors. 
Use Live Previews to engage users. 


Place the preview in context of the action. 
f possible, have the real object change on the fly. 
se Live Previews to avoid page transitions. 


performance permits, provide real-time previews during character input for input fields. 
lternatively, trigger on leaving the field or provide a clear Call to Action button to initi- 


Progressive Disclosure 


The Progressive Disclosure pattern is related to Live Previews. When users are faced 
with a series of steps, it is often best to provide hints only when they are needed, instead 
of cluttering the interface by displaying all the hints at once. 


Picnik is a photo manipulation tool that adds photo-editing features to a number of photo- 
sharing sites. During the “Create Account” flow, it provides Progressive Disclosure of 
hints and feedback all along the way to keep the user engaged and successfully filling out 


the signup form (Figure 14-10). 


Create an account 


terrane 


ve a 
a Create my account? 


ve = 
a Creme my account 


Initial view 


There are actually five fields that need to be filled in. Ini- 
tially, Picnik only shows three. 


Password 


Moving into the password field reveals the “Password 
again’ field. The field is slightly faded out. 
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Create an account | amen “Password again” 
a Once the password is filled out, the “Password again’ field 
panes pentan brightens. 


Confirmation 


A simple checkmark indicates that the password was 
successfully entered. The “Password again’ field is hidden. 
Focus is now on “Email address”. 


“Email again” 


Like above, the “Email again’ field is initially shown slightly 
faded out. Once the field is entered, it illuminates. 


Ready to create account 


All fields have been entered. Two checkmarks indicate 
success. Notice that all along the way, more flowers have 
been showing up at the bottom of the dialog. 


Figure 14-10. Picnik provides a series of Progressive Disclosures during account creation 


Considerations 


Typically, login interfaces get little dynamic treatment. All fields for input are shown with 
every possible hint revealed. Unfortunately, this kind of full disclosure creates a very clut- 
tered interface. 
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Keeping it lightweight 


The right idea is to make the task feel as lightweight as possible. The Picnik interface says, 
“Tt is as easy as 1-2-3,” even though there are really five fields to be entered, not three. 


Tip 


Use Progressive Disclosure to make a heavier process feel more lightweight. 


There are some really nice subtle touches to the feedback in the Picnik form: 


The “Password again” and “Email again” fields are revealed only after entering the 
corresponding “Password” or “Email address” fields. 


The “...again” fields are shown at about half the intensity. This hints they are related 
to what users are entering but does not take over the entire process by immediately 
becoming full intensity. 


The “...again” fields are fully illuminated once entered. 
A simple checkmark is used to indicate success. 


Flowers keep appearing along the bottom after each successful entry. This provides a 
subtle feedback that users are making progress. 


Best Practices for Progressive Disclosure 


Here are some best practices to keep in mind: 


Use Progressive Disclosure to lead users through lengthy processes. 
Reveal help information just as it is needed. 
Remove help information as soon as the user leaves the input field. 


When appropriate, hint at what is about to be revealed (e.g. “Password again’ field in 
Picnik). 


Progress Indicator 


Another opportunity for creating a reactive interface occurs when the application is busy 
with a lengthy process. Progress Indicators keep a conversation going with the user when 
the rest of the interface is currently unavailable. This is a common situation on travel sites, 
as well as many search-based applications. 


In Chapter 12, we discussed the way Yahoo! Travel Farechase used transitions to improve 
perceived performance. Let's look at a similar example from another travel site, Micro- 
soft’s Farecast service. It provides a variety of Progress Indicators throughout the search 
process (Figure 14-11). 
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Search initiated 


Clicking the “Search” button triggers the first 
Progress Indicator, which simply changes the 
search button to say “Searching...” 


Diversion 


After a few seconds, the search results page is 
displayed. But notice that there are no results 
yet. 


There are actually three Progress Indicators: 
the “showing results” page, the “animating the 
fare" predications, and a progress bar. 


Results trickle in 


The first set of results now appears. The fare 
predictor panel finishes animating into place. 
The progress bar collapses to a small bar just 
above the results. 


Finished 


Results are displayed. The progress bar goes 
away. 


Figure 14-11. Farecast makes use of a number of different Progress Indicators to make the interface feel 


snappier and more reactive 
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Considerations 


There are some issues to consider when using Progress Indicators. 


Perceived performance 
There are actually nine Progress Indicators used by Farecast in this one flow: 
1. Search button label changes to “Searching...” 
Switch to search results page. 
“We're Searching...” animated progress bar. 
Daily Low Fare History chart animates from flat line to trend line. 
7-Day Low Fare Prediction spinning wheel. 
7-Day Low Fare Prediction spinning wheel changes to the “Tip: Wait” graphic. 
Progress bar collapses to single line, changes to read “Still searching...” 


First set of results trickle in. 


Se ge? SO Ce a ee oS 


Progress bar disappears. 


When I went through this process, it took 24 seconds from the time I clicked the Search 
button until I got all the results. But because there are so many reactions to my one action, 
the process seemed much faster. 


Tip 
Keeping the user informed improves the overall experience. 


Compare this to the traditional approach by Orbitz (Figure 14-12). 


INTRODUCING 


PRICE ASSURANCE 


iGetoun 
lowes trtorel 


Figure 14-12. Orbitz displays a single interstitial while it retrieves results 
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Orbitz is generally twice as fast as Farecast at retrieving flight results. Orbitz pulls results 
from its own service, while Farecast pulls from multiple services. However, in Orbitz, 
there is sometimes a noticeable delay before the Progress Indicator is shown. And since 
there is only one indicator, it stays on the stage longer than any single one of Farecast's 
indicators. The net result is that Farecast can feel at least as fast, if not faster, than Orbitz. 


Of course Progress Indicators can be really simple. When users search their mail folders in 
Yahoo! Mail, a simple busy indicator is displayed next to the search box (Figure 14-13). 


YAHOO! MAIL | 


dd, check Mail yj Compose 
Q~ liberty mutual © Lip 


Figure 14-13. Yahoo! Mail uses a simple spinning wheel to indicate a search is in progress 


Placing progress indicators next to the place the action was initiated is common. Another 
variation is to place the Progress Indicator over the area that will be affected by the op- 
eration. In the Yahoo! Mail example, this would mean placing a Progress Indicator over 
the search results area. This technique is common in Refining Search and can be seen in 
Kayak (Figure 14-14). 
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Figure 14-14. Kayak places the progress indicator over the results area 


Immediate feedback 


Progress indication can come in many forms. It is a way to keep the user informed of 
changing status. In Yahoo! Answers, user are restricted to 110 characters for the question. 
As users type in the question, the number of characters they have left is updated (Figure 
14-15). 
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What is the | 
38 


k 


Figure 14-15. Yahoo! Answers displays real-time feedback on how much longer a question can be 
This simple feedback loop encourages users to formulate short questions. 


Showing upload status 


Progress Indicators are really helpful for showing upload status. Due to constraints on 
the way files are usually uploaded to the Web, showing status is often hard to do. However, 
some products have overcome the challenge and provide constant updates on individual 
file upload status, as well as overall file upload status. The Yahoo! Photos uploader pro- 
vides this kind of dynamic status (Figure 14-16). 


Uploading 
| 
VAM a lt 
1 of 18 photos uploaded. Hide datats 
Photo Name Size Upload Status 
B a 
¥ 
18 files (4.5 MD total) 
Cancel 


Figure 14-16. Yahoo! Photos provided multiple file upload status 


Deferred loading 

A final example of a Progress Indicator is one that is useful when there are external ser- 
vices you would like to defer loading until after the page is shown. An earlier design of 
Technorati used this technique to load its own content quickly, and then used loading 
indicators in place of the external content (Figure 14-17). 
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Figure 14-17. An earlier version of Technorati used loading indicators for deferred content-loading of 
external services 


Best Practices for Progress Indicators 


Here are some best practices to keep in mind: 

- Use Progress Indicators to improve perceived performance. 

+ Keep indicators simple. 

+ Keep indicators in close proximity to where the action is. 

- When the focus is on user input, show progress indicators next to the input field. 

+ When the focus is on the result of an input or activity, show progress indicators over the 
results area. 

- If possible, have the indicators show actual progress. Alternatively, do something cyclical 
(spinning wheel, back and forth animation, and so on). 
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Periodic Refresh 


Sometimes an interface needs to showcase new content or new community activity. In 
such a case, the interface is not really reacting to the users’ input but to the larger com- 
munity as a whole. Periodic Refresh brings in fresh content on a periodic basis without 


direct user interaction. 


Digg Spy is a feature of the Digg site that allows users to observe real-time activity in the 


Digg community (Figure 14-18). 


Digg Spy - A Real- 


© Qnty Postar 
© Oniy Vecomirg 
+ AR Stories 


Fe FE FE Fe 
What? Diggs Story 


ow Ubertaran Bob Ber Runs to a GOP. Chorus of Do.. 


a Lieberman: Obama's iraq Plan Gives iran & ab-Qsece 

a = Sony granted patent for handheld with touchscreen 

fS] a McCain Tekes Credit for BE He Once Opposed 

e o The Left Demanda s Retum to 55 MPH. WE Obama O 

om Tatioe interview - My first Tattoo, t Wee Funny 
Digg Spy 


Fe FO FE Fe 


What? Diggs Story 


Ubertanan Dob Dar Runs to a GOP. Cherus of Do. 
Lieberman: Odana $ iraq Plan Gives iran A a6-Qeece 
Sony granted pateat for handheld with touchscreen 


McCain Takes Credit for BIM He Once Opposed 


The Let Demands 3 Aetuen to 55 MPH, WE Otena O 


Top Digg stories shown 


Digg Spy shows real-time activity of the Digg 
community. 


New story rolling in 


Older stories are pushed down, making room 
for a new story. 
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New story 


New stories fade into the empty slot. 


Fe FO FE Fe 


What? Diggs Story 


Uberianan Dob Dar Runs to a GOP. Chorus of Do 


a 

Py Lieberman: Obama s iraq Man Gives iran & at-Qeece 
@ Sony granted patent for handheld with touchscreen 
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Figure 14-18. Digg Spy uses Periodic Refresh to show top stories as they come in 


Digg Spy generally shows new stories every few seconds. Each story is a single row in a 
list of other stories. Keeping the rows compact makes it easier to roll in new content. Each 
scroll is only the height of a single row. 


Tip 
Communicate community participation by periodically adding new content into the 
page. 


Considerations 


There are a few issues to consider when using Periodic Refresh. 


Visual noise 


Netflix’s Community section also uses the Periodic Refresh to spotlight recent member 
reviews (Figure 14-19). 


Download at WoweBook.Com 


294 Chapter 14: Feedback Patterns 
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Figure 14-19. Periodically, a new review is rolled in to replace the previous review; placing a mouse 
over the area pauses this feature 


One of the issues with the Netflix version is that each review is taller than a Digg Spy 
summary. This means each time a new review rolls in, it has to cover a distance equal to 
the height of a review. While Digg Spy is able to animate a new story into place in about 
a fourth of a second, Netflix reviews take closer to two seconds. An alternate approach 
would be to show collapsed review summaries. This would allow more reviews to be dis- 
played and take less time to display each new review. 


Pausing Periodic Refresh 


For Netflix, placing the mouse over the area pauses the refresh. Digg Spy supplies a Play 
and Pause button. 


Best Practices for Periodic Refresh 


Here are some best practices to keep in mind: 
- Use Periodic Refresh to keep a site's content fresh. 
- Use Periodic Refresh to create a sense of relevancy. 
- Don't update too often. Maintain a balance between readability and relevance. 


- Allow the user a way to pause the automatic refreshes. This can be explicit or implicit. 
Implicit is usually the best approach. One method is to make any interaction with the area 
signal a pause. 
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Epilogue 
Principles and Patterns for 
Rich Interaction 


In the preceding chapters, we focused on designing for rich interactions. 


The Principles 


The six principles are simple and straightforward. 


Make It Direct 


The principle of WYSIWIG (What You See Is What You Get) has been proven over and 
over again during the last quarter of a century. Allowing users to directly edit content in 
context (In-Page Editing), control the interface with Drag and Drop, and directly ma- 
nipulate objects (Direct Selection) all work toward creating an intelligent interface. 


Keep It Lightweight 


Respecting the user's level of effort is key to producing an effortless interface. Under- 
standing the user's intent and providing just the right amount of interface (Contextual 
Tools) within the current context is critical to providing a lightweight experience. 


Stay on the Page 


Instead of breaking into the user's normal workflow with repeated page refreshes, we can 
now create an experience that more closely matches the user's flow. The proper use of 
Overlays, Inlays, Virtual Space, and Process Flows is integral to matching the way the 
user wants to work—not the way we forced them to work in the past. 
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Provide an Invitation 


With an array of interactions at our disposal, it would be easy to have most of our features 
go unnoticed and unused. Throwing out contextual “welcome mats” within the page both 
statically and dynamically (Affordance Invitation, Call to Action Invitation, Blank Slate 
Invitation, Tour Invitation, Hover Invitation, Drag and Drop Invitation, Inference In- 
vitation, and More Content Invitation) invites users to explore new idioms, improving 
their overall experience. 


Use Transitions 


Not just for those annoying mortgage ads, Transitions are necessary for both communi- 
cation and engagement. With a wide variety of cinematic effects at our disposal (Brighten 
and Dim, Expand/Collapse, Self-Healing, Animation, Spotlight, Lightbox Effect, Face- 
plate, Flip, Carousel, Accordion, Slide In and Slide Out, and Zoom), we can either over- 
whelm our user with Animation Gone Wild or Needless Fanfare, or we can use these 
effects to explain happenings, show relationships, focus attention, improve performance, 
and create the illusion of virtual space. 


Be Reactive 


For every action there should be an equal and opposite reaction. This is the physics of our 
interfaces. Providing Auto Complete, Live Suggest, Live Search, Refining Search, Live 
Previews, Progressive Disclosure, Progress Indicators, and Periodic Refresh form the 
tools for creating a lively, reactive interface. 


Staying Up to Date 


The Web is constantly evolving, and it is impossible to always have the most up-to-date 
examples, and to capture emerging patterns in a book. We provide two resources to keep 
this work updated and relevant: 


Designing Web Interfaces companion site 
Please visit http://designingwebinterfaces.com for up-to-date information on this 
book as well as updated examples, principles, and patterns. You can also contact the 
authors at this site. 


Designing Web Interfaces Flickr site 
All of the figures are available on http://flickr.com/photos/designingwebinter faces/. 
In addition, for many of the figures there are companion screencasts (movies) show- 
ing the interactions in action. 
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Drag and Drop (see Drag and Drop 
Invitation) 
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guidelines for choosing specific editing 


patterns, 23 


H 


HalfBrain, 25 
Hard Rock Café, 151-152 
highlighting, 48 
Hover and Cover, 88, 116, 120 
Hover Invitation, 191-196 
37 Signals’ Backpackit, 194 
best practices, 196 
dynamic versus static, 193-195 
enhancing, 195 
Flickr, 195 
The Gap, 191-192 
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when to consider using, 14 
Single-Field Inline Edit, 3, 4-8 
accessibility, 7 
discoverability, 6 
Table Edit, 3, 15-17 
activation, 17 
rendering versus editing, 17 
in-page update, 143 
Input Overlay, 119-121 
American Express, 119 
anti-pattern: Hover and Cover, 120 
best practices, 121 
clear focus, 120 
display versus editing, 120 
Insertion Bar approach, 36-38 
insertion targeting 
Drag and Drop List, 43 
Drag and Drop Module, 36-38 


interactive content loading, 145 
Interactive Single-Page Process, 160-164 
Amazon's interface for selecting a shirt, 
162-163 
best practices, 168 
Broadmoor Hotel, 163-164 
The Gap, 161-162 
keeping users engaged, 163 
responsiveness, 161 
interesting moments, 26-29 
interesting moments grid 
iGoogle, 36 
My Yahoo!, 28, 38 
Netvibes, 31 
International Herald Tribune, 144 
invitations, advantage of, 213 
invitation to drag, 203-208 
invitation to drop, 207-209 
iPhone, 18-19, 80 
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Preview, 37 Auto Complete, 255 
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Colophon 


The image on the cover of Designing Web Interfaces is a Guianan cock-of-the-rock (Rupi- 
cola rupicola). Easily identified by the distinctive half-moon crest on its head, this bird 
is native to mountainous regions in northern South America, spanning the countries of 
Guyana, French Guiana, Suriname, Colombia, Venezuela, and Amazonian Brazil. Mainly 
fruit eaters, Guianan cocks-of-the-rock pass whole seeds through their digestive systems, 
thereby contributing to tree and plant diversity in the lowland forests they inhabit. 


Adult cocks-of-the-rock reach heights of eight inches and have stout, round bodies. Males 
are typically smaller than females and have bright orange plumage with black and white 
accents, whereas the females are a muted brown. The males take advantage of their bright 
plumage to attract females as part of their elaborate mating ritual, during which they 
gather in a lek, spread their wings, strut, ruffle their tail feathers, and issue a series of 
unique calls. The birds are polygamous; successful males will mate with many females 
during breeding season. Females build cup-shaped nests for their eggs out of clay and 
plant matter inside cliff cavities or along rock faces, and they raise their chicks alone. 


In the early 20th century, hunters trapped Guianan cocks-of-the-rock and sold them as 
pets. Today, the birds are popular among bird watchers, eco tourists, and fly fishermen 
(who use the colorful feathers to make fishing flies). Additionally, the Guianan cock- 
of-the-rock, with its prominent “mohawk” and vibrant plumage, has been featured on 
tourism brochures and stamps for several of the countries it inhabits. Although native 
tribes still hunt the birds for feathers and food, the species is not threatened or at risk of 
extinction. 


The cover image is from Johnsons Natural History. The cover font is Adobe ITC Gara- 
mond. The text font is Adobe Minion Pro, and the heading and note font is Adobe Myriad 
Pro Condensed. 
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